1 导航栏
1-1 导航栏 = 链接列表
导航栏基本上是一个链接列表，因此使用 <ul> 和 <li> 元素是非常合适的：
<ul>
<li><a href=" ">百度</a></li>
<li><a href=" ">谷歌</a></li>
<li><a href=" ">360</a></li>
<li><a href=" ">火狐</a></li>
<li><a href=" ">UC</a></li>
</ul>
css:
ul { list-style-type: none }/*删除圆点，导航栏不需要列表项标记*/
运行效果：
1-2 垂直导航栏
使用<ul>和<li>元素的导航栏，默认是垂直的，我们只需在上叙代码中添加<a>元素的样式：
a {
display: block;/*块显示*/
width: 50px;
background-color: #5F6;
text-decoration: none/*没有文本装饰*/
}
运行效果：
请始终规定垂直导航栏中元素的宽度。如果省略宽度，IE6 会产生意想不到的结果。
1-3 水平导航栏
有两种创建水平导航栏的方法。使用行内或浮动列表项。但是如果您希望链接拥有相同的尺寸，就必须使用浮动方法。
（1）行内列表项
ul { list-style-type: none }
a {
background-color: #5F6;
text-decoration: none
}
li { display: inline } /*内联显示*/
运行效果：
因为 <li> 是内联显示，不能设置宽度，<a> 链接便根据文本的长度，自适应
（2）对列表项进行浮动
ul { list-style-type: none }
a {
display: block;
width: 50px;
background-color: #5F6;
margin-left: 10px;
text-decoration: none
}
li { float: left } /*左浮动*/
运行效果：
2 下拉菜单
<div class="div1">
<p>浏览器</p>
<div class="div2">
<a href="">百度</a>
<a href="">谷歌</a>
<a href="">360</a>
<a href="">火狐</a>
<a href="">UC</a>
</div>
</div>
CSS:
.div1 {
position: relative;
text-align: center;
display: inline-block
}
.div1 p {
background-color: #562;
font-size: 20px;
width: 100px;
height: 30px;
color: #FFF
}
.div2 {
position: absolute;
right: 0;
top: 50px;
display: none;
background-color: #BDB76B
}
.div2 a {
display: block;
width: 80px;
text-decoration: none;
color: #2F4F4F
}
.div1:hover .div2 {
display: block
}
运行效果：
