css -- 导航条

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;
}