網頁設計中，二級導航是很常見的設計元素，可以為用戶提供更清晰的導航路徑。可以利用CSS進行純CSS二級導航的設計，下面介紹一種簡單實用的方法。

<!-- HTML代碼 -->
<nav class="main-navigation">
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">產品分類</a>
<ul class="sub-navigation">
<li><a href="#">家具</a></li>
<li><a href="#">電器</a></li>
<li><a href="#">個護化妝</a></li>
</ul>
</li>
<li><a href="#">關于我們</a></li>
</ul>
</nav>

以上是HTML代碼部分，其中"main-navigation"是一級導航的類名，"sub-navigation"則是二級導航的類名。

<!-- CSS 代碼 -->
.main-navigation>ul>li {
float: left;
}
.main-navigation>ul>li>a {
display: block;
text-align: center;
line-height: 50px;
padding: 0 20px;
}
.sub-navigation {
display: none;
position: absolute;
width: 200px;
background-color: #fff;
border: 1px solid #ccc;
box-shadow: 0px 2px 2px rgba(0, 0, 0, .3);
}
.sub-navigation li {
float: none;
}
.sub-navigation li a {
display: block;
text-align: left;
line-height: 30px;
padding: 0 20px;
}
.main-navigation li:hover > .sub-navigation {
display: block;
}

以上是CSS代碼部分，主要的實現原理是：一級導航懸浮時，通過CSS的:hover偽類觸發子元素的顯示，二級導航則利用絕對定位調整位置。

這個純CSS的二級導航設計方法簡單又實用，可以應用于各類網站的設計中，不需要使用JS也能實現不錯的視覺效果。