我们在浏览网页时会看到好多种导航菜单，有横向导航菜单、横向二级导航菜单、纵向菜单
通常是使用无序列表ul/li来建立导航菜单
1、纵向菜单
如：
<ul>
<li><a href=''#''>首页</a></li>
<li><a href=''#''>新闻</a></li>
...
</ul>
在css样式中设置
ul{
/*去除导航前的小点*/
list-style: none;
width: 100%;
}
a{
text-decoration: none;
/*去除下划线*/
}
li{
width: 100px;
height: 30px;
line-height:30px;
background-color: #ccc;
margin-bottom: 1px;
/* padding-left: 10px;通常向右移动10px*/
text-indent: 10px;
/*文本缩减*/
}
现在基本的样式都设置在li标签里了，不太合理；我们对a标签设置就可以了，让a标成一个块级元素
ul li a{display：block；}
于是，当a标签设置成块级元素时，
ul{
/*去除导航前的小点*/
list-style: none;
width: 100%;
}
a{
display：block；
width: 100px;
height: 30px;
line-height:30px;
background-color: #ccc;
margin-bottom: 1px;
/* padding-left: 10px;通常向右移动10px*/
text-indent: 10px;
/*文本缩减*/
}
a:hover{
background-color: #f60;
color: #fff;
}
2.水平导航
水平菜单的结构和纵向菜单一样
只需要添加一个float：left
如以上例子为例：
ul{
list-style: none;
}
li{
float: left;
/*浮动*/
}
a{
text-decoration: none;
display: block;
line-height: 40px;
width: 100px;
background-color: #ccc;
margin-bottom: 1px;
text-indent: 10px;
text-align: center;
/*文本居中*/
}
a:hover{
background-color: #f60;
color: #fff;
}
3、圆角菜单
通过设置背景，改变外观样式
通过a：hover，可以为菜单增加交互效果（宽度、高度、文字的大小，背景的颜色）
菜单<li>浮动后，<li>脱离文档流，导致<ul>将失去高度和宽度；如果需要对<ul>进行整体背景设置，首先要给<ul>定义宽、高。
例
ul{
list-style: none;
height: 50px;
border-bottom: 6px solid #f60;
margin: 0px 20px 10px 120px;
padding-left: 30px;
padding-top: 40px;
}
li{
float: left;
margin-top:10px;
}
a{
text-decoration: none;
display: block;
line-height: 40px;
width: 120px;
height: 30px;
background-color: #ccc;
margin-bottom: 1px;
text-indent: 10px;
text-align: center;
background:url(images/menu.jpg);
}
.on, a:hover{
background-position: 0 -30px;
color: #fff;
}
html：
<li><a class="on" href="#">主页</a></li>
<li><a href="#">生活说</a></li>
4、伸缩菜单
（margin：可以用负值，向相反方向移动）
ul{
list-style: none;
}
li{
float: left;
/*浮动*/
}
a{
text-decoration: none;
display: block;
line-height: 40px;
width: 100px;
background-color: #ccc;
margin-bottom: 1px;
text-indent: 10px;
text-align: center;
/*文本居中*/
}
a:hover{
background-color: #f60;
color: #fff;
}