CSS垂直树形下拉菜单

日期：2007年5月19日作者：查看:[大字体中字体小字体]

      <ul>
        <li><a href="#">United Kingdom</a></li>
        <li><a href="#">France</a></li>
        <li><a href="#">USA</a></li>
        <li><a href="#">Australia</a></li>
      </ul>
    </li>
  </ul>
第二步:视觉上的修饰

上面所写的代码直接在浏览器下可以说非常的难看...所以我们先给他们加上点样式,不至于因为外表的问题弄的你没有兴趣继续做下去,呵呵

首先我们把烦人的点点去掉,并定义这个菜单的宽度:
```
以下是引用片段：
ul { 
 margin: 0; 
 padding: 0; 
 list-style: none; 
 width: 150px; 
           border-bottom: 1px solid #ccc; 
 }
```
接下来,我们要定义里面内容部分,非常幸运,列表默认的排列就是垂直的,这与我们的要求相一致,定位方式我们应该设置为相对定位(relative)因为副菜单要在相对的位置上进行绝对定位:
```
以下是引用片段：
ul li { 
 position: relative; 
 }
```
现在我们定义的就是副菜单的内容部分,使用left和top属性我们就可以让它们显示在主菜单内容的右边.display属性值为none所以在默认情况下是隐藏的:
```
以下是引用片段：
li ul { 
 position: absolute; 
 left: 149px; 
 top: 0; 
 display: none; 
 }
```
最后得修饰下里面的a元素:
```
以下是引用片段：
ul li a { 
 display: block; 
 text-decoration: none; 
 color: #777; 
 background: #fff; 
 padding: 5px; 
 border: 1px solid #ccc; 
 border-bottom: 0; 
```
上一页 [1] [2] [3] 下一页
CSS垂直树形下拉菜单相关文章：
CSS垂直树形下拉菜单相关软件

上一篇:CSS层叠样式的主次顺序

下一篇:c#调用des64.dll进行加密解密

特别声明：本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载，但请务必注明出处和原始作
者.文章版权归文章原始作者所有.对于被本站转载文章的个人和网站，我们表示深深的谢意。如果本站转
载的文章有版权问题请联系编辑人员,我们尽快予以更正. 转载请注明来源：http://www.hackhome.com

CSS垂直树形下拉菜单

第二步:视觉上的修饰

精品推荐

热点TOP10

特别推荐