如何 - 可懸停的下拉選單
瞭解如何使用 CSS 建立一個可懸停的下拉選單。
下拉選單
下拉選單是一個可切換的選單，允許使用者從預定義列表中選擇一個值
自己動手試一試 »建立可懸停的下拉選單
建立一個當用戶將滑鼠懸停在元素上時顯示的下拉選單。
步驟 1) 新增 HTML
示例
<div class="dropdown">
<button class="dropbtn">下拉選單</button>
<div class="dropdown-content">
<a href="#">連結 1</a>
<a href="#">連結 2</a>
<a href="#">連結 3</a>
</div>
</div>
示例解釋
使用任何元素來開啟下拉選單，例如 <button>、<a> 或 <p> 元素。
使用容器元素（如 <div>）建立下拉選單，並在其中新增下拉鍊接。
將 <div> 元素包裝在按鈕和 <div> 周圍，以便使用 CSS 正確放置下拉選單。
步驟 2) 新增 CSS
示例
/* 下拉選單按鈕 */
.dropbtn {
background-color: #04AA6D;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
/* 容器 <div> - 用於定位下拉選單內容 */
.dropdown {
position: relative;
display: inline-block;
}
/* 下拉選單內容 (預設隱藏) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* 下拉選單中的連結 */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* 懸停時更改下拉菜單鏈接的顏色 */
.dropdown-content a:hover {background-color: #ddd;}
/* 滑鼠懸停在下拉按鈕上時顯示下拉選單 */
.dropdown:hover .dropdown-content {display: block;}
/* 當下拉選單內容顯示時，更改下拉選單按鈕的背景顏色 */
.dropdown:hover .dropbtn {background-color: #3e8e41;}
自己動手試一試 »
示例解釋
我們用背景色、內邊距等樣式化了下拉按鈕。
.dropdown 類使用 position:relative，這在我們需要將下拉選單內容放置在下拉選單按鈕正下方（使用 position:absolute）時是必需的。
.dropdown-content 類包含實際的下拉選單。預設情況下它是隱藏的，懸停時會顯示（見下文）。請注意 min-width 設定為 160px。您可以隨意更改。提示：如果您希望下拉選單內容的寬度與下拉選單按鈕一樣寬，請將 width 設定為 100%（並設定 overflow:auto 以在小螢幕上啟用滾動）。
我們沒有使用邊框，而是使用了 box-shadow 屬性，使下拉選單看起來像一個“卡片”。我們還使用 z-index 將下拉選單置於其他元素的前面。
:hover 選擇器用於在使用者將滑鼠移到下拉按鈕上時顯示下拉選單。
右對齊的下拉選單
導航欄中的下拉選單
提示：請訪問我們的 CSS 下拉選單教程，瞭解更多關於下拉選單的資訊。
提示：請訪問我們的 可點選下拉選單，瞭解更多關於可點選下拉選單的資訊。
