ul和li标签实现列表

css样式

#m{
width: 80%;
overflow: hidden;
padding: 0px;
margin: 50px 0 0 20px;
}
#m,#m ul{
list-style-type: none;
padding: 0px;
}
#m li a{
display: block;
color:#FFFFFF;
text-decoration: none;
}
#m li ul li a{
text-decoration: none;
}
#m li ul{
display:none; /*设置ul被隐藏*/
}
#m li:hover ul{
display: block; /*设置元素出现*/
}

html代码

<ul id="m">
<li>
<a href="#">文件1</a>
<ul>
<li><a href="#">文档1</a></li>
<li><a href="#">文档2</a></li>
</ul>
</li>
<li>
<a href="#">文件2</a>
</li>
<li>
<a href="#">文件3</a>
</li>
</ul>

ul和li标签实现列表

原文：http://www.cnblogs.com/feng--fan/p/7591284.html