下拉導航是一種常用的網頁導航方式。通過鼠標懸停或點擊觸發下拉菜單，使得用戶方便地瀏覽網頁內容。實現下拉導航的方法有多種，本文將介紹一種基于CSS的實現方法。

.nav {
position: relative;
}
.nav__link {
display: inline-block;
padding: 10px;
}
.nav__link--has-dropdown:hover .nav__dropdown {
display: block;
}
.nav__dropdown {
position: absolute;
top: 40px;
left: 0;
display: none;
width: 200px;
padding: 10px;
}
.nav__dropdown-item {
display: block;
margin-bottom: 10px;
}

上述 CSS 代碼實現了一個基礎的下拉導航。首先，我們需要給導航容器設置 position: relative; ，以便下拉菜單能夠基于其進行定位。接著，我們將導航鏈接設置為 display: inline-block; ，并給有下拉菜單的鏈接添加一個:hover 偽類選擇器。通過這樣，當用戶將鼠標懸停在該鏈接上時，將顯示其下拉菜單。

下拉菜單則需要設置為 position: absolute; ，并給其設置 top 和 left 屬性，以便準確地定位。同時，為了避免下拉菜單對其他內容的覆蓋，我們可以將其 display 屬性設置為 none 。在鏈接被懸停時，使用:hover 偽類選擇器，將 display 屬性設置為 block ，從而顯示下拉菜單。

最后，我們可以為下拉菜單的選項添加樣式，如此處的 .nav__dropdown-item 類。在樣式方面，你可以根據自己的需要進行修改和添加。希望這篇簡短的教程能夠幫助你快速實現一個漂亮的下拉導航。