二級菜單導航

經過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;

}實現二級菜單導航