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:;
padding:;
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:;
}
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:;
padding:;
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:;
border-right:;
}
/*remove unwanted borders on the end list*/
ul.nav li:last-child a{
border-right:;
border-bottom:;
}
ul a:hover,
ul a:focus{
color: #fff;
background-color: #000;
}