下拉導航在網站設計中占有重要地位，可以讓網站更加美觀和實用。而使用純 CSS 制作下拉導航無疑是最為簡單和高效的方法之一。 下面將介紹一種通過 CSS 制作下拉導航的方法，來看一下下拉導航的效果圖： 下拉導航效果圖 首先，我們需要在 HTML 中創建一個包含導航菜單的 div 元素和一組鏈接元素。然后，通過 CSS 在 div 元素上添加偽類，當鼠標懸停在該元素上時，將其下的鏈接元素顯示出來。接下來，我們需要對鏈接元素進行樣式設計，以便達到美觀和實用的效果。 下面是相應的 HTML 代碼：

<div class="dropdown">
<a href="#" class="dropbtn">下拉菜單</a>
<div class="dropdown-content">
<a href="#">鏈接1</a>
<a href="#">鏈接2</a>
<a href="#">鏈接3</a>
</div>
</div>

我們用 CSS 對元素進行樣式設計，如下所示：

/* 下拉菜單樣式 */
.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* 下拉菜單內的鏈接樣式 */
.dropdown-content {
display: none;
position: absolute;
z-index: 1;
}
/* 顯示下拉菜單 */
.dropdown:hover .dropdown-content {
display: block;
}
/* 鏈接樣式 */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* 鏈接懸停樣式 */
.dropdown-content a:hover {
background-color: #f1f1f1;
}

注意，在上述代碼中，我們使用了:hover 偽類來控制下拉菜單的顯示和隱藏效果。當鼠標懸停在包含導航菜單的 div 元素上時，其下方的鏈接元素將會顯示出來。 通過以上的 CSS 代碼，我們成功制作出了下拉導航效果圖。此方法既簡單又高效，也能夠滿足設計的需要。