只含一层的菜单
<nav class="list1">
<ul>
<li><a href="#">a</a></li>
<li><a href="#">b</a></li>
<li><a href="#">c</a></li>
<li><a href="#">d</a></li>
<li><a href="#">e</a></li>
</ul>
</nav>
一层纵向菜单
li {list-style:none;}(默认圆点不美观)
列表项之间设置border
a {text-textdecoration:none;}(默认下划线不美观)
a:hover也要重新设置
a {display:block;}把a的区域扩充到父元素
一层横向菜单
ul {overflow:hidden;}(内容一多溢出就不可见了)
li {float:left;}
a {display:block;}扩充点击区域至整个父元素
多层嵌套的菜单
<nav class="multi_drop_menu">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">1</a></li>
<li><a href="#">1</a></li>
<li><a href="#">1</a>
<ul>
<li><a href="#">2</a></li>
<li><a href="#">2</a></li>
<li><a href="#">2</a>
<ul>
<li><a href="#">3</a></li>
<li><a href="#">3</a></li>
<li><a href="#">3</a></li>
<li><a href="#">3</a></li>
</ul>
</li>
<li><a href="#">2</a></li>
</ul>
</li>
</ul>
</nav>
多层嵌套下拉菜单
.multi_drop_menu * {
margin:0;
padding:0;
}/*减少原来的内外边距对布局的影响*/
.multi_drop_menu {
font:1em helvetica, arial,/*微软的无衬线字体*/ sans-serif;/*无衬线字体*/
}
.multi_drop_menu a {
display:block;/*链接区域扩充到整个容器*/
color:#555;
background-color:#eee;
padding:.2em 1em;/*1em相当于body的font-size大小，默认情况下为16px，当然可以修改*/
border-width:3px;
border-color:transparent;
}
.multi_drop_menu a:hover {
color:#fff;
background-color:#aaa;
}
.multi_drop_menu a:active {
color:#ccc;
background:#fff;/*背景相关的都能写到background里面来*/
}
.multi_drop_menu ul {
float:left;
}
.multi_drop_menu li {
float:left;
position:relative;/*给子元素的absolute定位提供定位上下文*/
list-style:none;
}
.multi_drop_menu li:last-child a {
border-right-style:none;
}
.multi_drop_menu li a {
display:block;
border-right-style:solid;
background-clip:padding-box;/*选定背景显示的盒子区域*/
text-decoration:none;
}
.multi_drop_menu li ul {
width:9em;
display:none;/*默认不显示，hover时显示*/
position:absolute;
left:0;
top:100%;
}
.multi_drop_menu li:hover > ul {
display:block;
}/*>左边的只能是父元素*/
.multi_drop_menu li li {
float:none;
}
.multi_drop_menu li li a {
border-right-style:none;
border-top-style:solid;
}
.multi_drop_menu li li ul {
display:none;
}
.multi_drop_menu li li ul {
position:absolute;
left:100%;
top:0;
}
.multi_drop_menu.vertical li {
float:none;
}
.multi_drop_menu.vertical li ul {
left:100%;
top:0;
}