二级菜单导航

经过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;

}实现二级菜单导航