在網頁的設計中，導航欄是一個非常重要的組成部分。它不僅提供了網站的導航功能，還體現了網站的整體風格。今天我們來學習一下如何使用CSS設計一個下拉效果的導航欄。

<ul class="nav">
<li><a href="#">首頁</a></li>
<li><a href="#">新聞</a>
<ul>
<li><a href="#">國內新聞</a></li>
<li><a href="#">國際新聞</a></li>
</ul>
</li>
<li><a href="#">商品</a>
<ul>
<li><a href="#">手機</a></li>
<li><a href="#">電腦</a></li>
</ul>
</li>
<li><a href="#">關于我們</a></li>
<li><a href="#">聯系我們</a></li>
</ul>

首先，我們需要將導航欄的結構封裝成一個ul列表，并將每個菜單項放到li列表項中。

接著，我們為每個菜單項設置一個下拉菜單，使用ul列表來實現。在CSS中，我們為下拉列表設置一個display:none的屬性，這樣下拉菜單默認是隱藏的。

.nav ul {
display: none;
}

最后，我們需要使用CSS對鼠標滑過和點擊事件進行控制，顯示或隱藏下拉菜單。使用:hover和:active選擇器，我們可以通過改變下拉列表的display屬性來實現這一效果。

.nav li:hover ul {
display: block;
}
.nav li:active ul {
display: block;
}

上面的代碼表示：當鼠標滑過或點擊li菜單項時，顯示其下方的下拉列表。

實際上，我們還可以添加更多的效果和樣式，比如美化下拉列表的背景顏色、添加動畫等。不過以上就是一個簡單的CSS下拉導航欄的實現方法。