CSS 下拉選單
使用 CSS 建立一個可懸停的下拉選單。
演示：下拉選單示例
將滑鼠懸停在下面的示例上
基本下拉選單
建立一個下拉框，當用戶將滑鼠懸停在元素上時出現。
示例
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
<div class="dropdown">
<span>滑鼠懸停在我身上</span>
<div class="dropdown-content">
<p>你好世界！</p>
</div>
</div>
自己動手試一試 »
示例解釋
HTML) 使用任何元素開啟下拉內容，例如 <span> 或 <button> 元素。
使用容器元素（如 <div>）建立下拉內容，並在其中新增您想要的任何內容。
在元素周圍包裹一個 <div> 元素，以便使用 CSS 正確地定位下拉內容。
CSS) .dropdown 類使用 position:relative，這在我們需要將下拉內容放置在下拉按鈕正下方（使用 position:absolute）時是必需的。
.dropdown-content 類包含實際的下拉內容。預設情況下它是隱藏的，懸停時會顯示（見下文）。請注意 min-width 設定為 160px。您可以隨時更改它。提示： 如果您希望下拉內容的寬度與下拉按鈕一樣寬，請將 width 設定為 100%（並設定 overflow:auto 以在小螢幕上啟用滾動）。
我們沒有使用邊框，而是使用了 CSS box-shadow 屬性，使下拉選單看起來像一個“卡片”。
:hover 選擇器用於在使用者將滑鼠移到下拉按鈕上時顯示下拉選單。
下拉選單
建立下拉選單，允許使用者從列表中選擇一個選項
此示例與上一個類似，只是我們在下拉框中添加了連結，並對它們進行了樣式設定，以匹配樣式化的下拉按鈕
示例
<style>
/* 樣式下拉按鈕 */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* 容器 <div> - 用於定位下拉選單內容 */
.dropdown {
position: relative;
display: inline-block;
}
/* 下拉選單內容 (預設隱藏) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
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: #f1f1f1}
/* 滑鼠懸停在下拉按鈕上時顯示下拉選單 */
.dropdown:hover .dropdown-content {
display: block;
}
/* 當下拉選單內容顯示時，更改下拉選單按鈕的背景顏色 */
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">連結 1</a>
<a href="#">連結 2</a>
<a href="#">連結 3</a>
</div>
</div>
自己動手試一試 »
右對齊的下拉內容
如果您希望下拉選單從右到左顯示，而不是從左到右，請新增 right: 0;
