前端開發中，經常需要設計到導航欄的設計，其中一個很重要的功能就是點擊顯示下一層導航。下面是一種使用CSS實現該功能的方法。

/* HTML代碼 */
<ul class="nav">
<li><a href="#">導航1</a>
<ul class="sub-nav">
<li><a href="#">子導航1.1</a></li>
<li><a href="#">子導航1.2</a></li>
<li><a href="#">子導航1.3</a></li>
</ul>
</li>
<li><a href="#">導航2</a>
<ul class="sub-nav">
<li><a href="#">子導航2.1</a></li>
<li><a href="#">子導航2.2</a></li>
<li><a href="#">子導航2.3</a></li>
</ul>
</li>
</ul>
/* CSS代碼 */
.sub-nav {
display: none; /* 初始化隱藏下一層導航 */
}
.nav li:hover .sub-nav {
display: block; /* 當鼠標懸浮在導航上時，顯示下一層導航 */
}

使用上述代碼，即可實現點擊顯示下一層導航的功能。當鼠標懸浮在導航上時，下一層導航會被顯示出來，在鼠標移開時則會自動隱藏。使用這種方法，可以避免使用JavaScript來實現此功能，從而提升網站的性能。