CSS是Web設計中不可或缺的一部分，可以實現很多樣式上的優化。

如果我們有一個網站需要二級導航，那該怎么寫呢？下面就給大家介紹一下。

<style>
.nav {
display: inline-block;
position: relative;
}
.nav:hover .nav-list {
display: block;
}
.nav-list {
display: none;
position: absolute;
top: 100%;
left: 0;
padding: 0;
margin: 0;
background-color: #fff;
list-style: none;
}
.nav-list li a {
display: block;
padding: 10px;
text-decoration: none;
color: #333;
font-size: 14px;
}
.nav-list li a:hover {
background-color: #ddd;
}
</style>
<div class="nav">
<a href="#">導航1</a>
<ul class="nav-list">
<li><a href="#">二級導航1</a></li>
<li><a href="#">二級導航2</a></li>
<li><a href="#">二級導航3</a></li>
</ul>
</div>

首先，我們先用一個容器包裹導航和二級導航，這里用了一個div，然后對它設置相對定位。

當鼠標滑過導航時，我們需要讓二級導航顯示出來，這里用了:hover偽類。

之后，對二級導航進行定位，并對樣式進行設置，比如背景色、邊距、列表樣式等。

最后，在二級導航中添加li標簽和a標簽即可添加二級導航內容。

這樣我們就完成了一個簡單的二級導航的編寫，是不是很簡單呢？