折叠菜单
例子：
CSS:
<style type="text/css">
*{
padding: 0;
margin: 0;
}
li a{
color: white;
/* 去掉下划线 */
text-decoration: none;
}
.menu{
width: 200px;
margin: 50px;
}
.menu li{
/* 去掉菜单的点 */
list-style: none;
/* 设置li的字体大小 */
font-size: 14px;
}
.menu>li{
background-color: red ;
text-align: center;
}
.menu ul{
display: none;
}
.menu ul li{
text-indent: 60px;
}
/* 鼠标进入时 */
.menu>li:hover ul{
display: block;
}
</style>
HTML：
<body>
<ul class="menu">
<li>
<a href="#">一级菜单</a>
<ul>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li>
<a href="#">一级菜单</a>
<ul>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li>
<a href="#">一级菜单</a>
<ul>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
</ul>
</body>
运行结果：
手风琴菜单
例子：
CSS:
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.menu li a{
color: white;
/* 去掉下划线 */
text-decoration: none;
width: 100px;
}
.menu{
margin: 50px;
}
.menu li{
/* 去掉菜单的点 */
list-style: none;
/* 设置li的字体大小 */
font-size: 20px;
background-color: red ;
text-align: center;
}
.menu>li,.menu>li>a,.menu>li>ul{
float: left;
}
.menu>li:hover ul{
display: block;
}
.menu ul{
display: none;
}
</style>
运行结果：
一起学习，一起进步 -.- ，如有错误，可以发评论
