标签：
1、垂直导航条
HTML：
<ul class="nav"> <li><a href="">Home</a></li> <li><a href="">Home</a></li> <li><a href="">Home</a></li> <li><a href="">Home</a></li> <li><a href="">Home</a></li> </ul>
去除默认样式：
ul .nav{ margin: 0; padding: 0; list-style-type: none; width:8em; background-color:#ccc; border:1px solid #ccc; }
对a链接进行操作：
ul .nav a{ display: block; color: #ccc; text-decoration: none; border-top: 1px solid #000; padding: 0.3em 1em; }
对最后一项a进行操作：
ul .nav .last a{ border-bottom:0; }
2、水平导航条
在1、垂直导航条的基础，对li进行左浮动
注意：当元素浮动的时候，它不再占据文档流中的任何空间，因此，父列表中实际没有东西，它就会收缩，从而掩藏列表背景。有几种办法可以让父元素包含子元素：
A：添加一个进行清理的元素
B：让父元素浮动，并且使用某个元素（比如页脚站点）对他进行清理以便换行
C：使用overflow：hidden技术
3、下拉式菜单
<ul class="nav"> <li><a href="">Home</a></li> <ul> <li><a href="">Home</a></li> <li><a href="">Home</a></li> <li><a href="">Home</a></li> <li><a href="">Home</a></li> <li><a href="">Home</a></li> </ul> <li><a href="">Home</a></li> <li><a href="">Home</a></li> <li><a href="">Home</a></li> <li><a href="">Home</a></li> </ul>
CSS样式：横导航，竖下拉
ul.nav, ul.nav ul{ margin: 0; padding: 0; list-style-type: none; float: left; border: 1px solid #ccc; background-color: #f00; } ul.nav li{ float: left; width: 8em; background-color: #f00; } ul.nav li ul{ width: 8em; position: absolute; left: -999em; } .nav li:hover ul{ left: auto; } ul.nav a{ display: block; color: #ccc; text-decoration: none; padding: 0.3em 1em; border-right: 1px solid #f00; border-left: 1px solid #333; } ul.nav li li a{ border-top: 1px solid #444; border-bottom: 1px solid #ddd; border-left: 0; border-right: 0; } /*remove unwanted borders on the end list*/ ul.nav li:last-child a{ border-right: 0; border-bottom: 0; } ul a:hover, ul a:focus{ color: #fff; background-color: #000; }
标签：
原文地址：http://www.cnblogs.com/zhanghuiyun/p/5582402.html
