通过CSS样式实现二级菜单导航。
首先写好一级栏目和二级栏目的基本内容。
<div class="nav">
<ul>
<li><a href="#">首页</a>
<ul>
<li><a href="#">首页1</a></li>
<li><a href="#">首页1</a></li>
<li><a href="#">首页1</a></li>
</ul>
</li>
<li><a href="#">第二页</a>
<ul>
<li><a href="#">第二页1</a></li>
<li><a href="#">第二页1</a></li>
<li><a href="#">第二页1</a></li>
</ul>
</li>
<li><a href="#">第三页</a>
<ul>
<li><a href="#">第三页1</a></li>
<li><a href="#">第三页1</a></li>
<li><a href="#">第三页1</a></li>
</ul>
</li>
<li><a href="#">第四页</a>
<ul>
<li><a href="#">第四页1</a></li>
<li><a href="#">第四页1</a></li>
<li><a href="#">第四页1</a></li>
</ul>
</li>
</ul>
</div>
其次设置好样式，
.nav li a{
display: block;
text-align: center;
text-decoration: none;
background-color: gray;
height: 22px;
line-height: 22px;
}
通过display:none对二级栏目进行隐藏，
.nav li ul{
display: none;
}
再设置
.nav li:hover ul{
display: block;
}实现二级菜单导航
原文：http://www.cnblogs.com/wby-blog/p/4525794.html