了解如何創建使用CSS一個hoverable下拉菜單。
落下
一個下拉菜單是一個可切換的菜單，允許用戶選擇從預定義列表中的一個值：
創建Hoverable下拉
創建當用戶在一個元素上移動鼠標時出現的下拉菜單。
步驟1）添加HTML：
例
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">Link
1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>例子解釋：
使用任何元件來打開下拉菜單，例如<按鈕>， <a>或<p>元件。
使用的容器元件(like <div>)以創建下拉菜單，然後添加在它裡面的下拉鏈接。
緊裹<div>按鈕周圍元件和<div>與CSS正確定位的下拉菜單。
步驟2）添加CSS：
例
/* Dropdown Button */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* The
container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display:
inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position:
absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow:
0px 8px 16px 0px rgba(0,0,0,0.2);
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Show the
dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown
button when the dropdown content is shown */
.dropdown:hover .dropbtn {
background-color: #3e8e41;
} 試一試» 例子解釋：
我們風格與背景顏色，填充等下拉按鈕
所述.dropdown類使用position:relative ，當我們要下拉內容這是需要正下方的下拉按鈕被放置(using position:absolute ) 。
該.dropdown-content類包含實際的下拉菜單。 它默認是隱藏的，並會顯示在懸停(see below) 。 注意min-width被設置為160像素。 隨意改變這一點。 提示：如果您想下拉內容的寬度一樣寬的下拉按鈕，在設置width為100％（和overflow:auto ，以使在小屏幕上滾動）。
而不是使用一個邊界，我們使用box-shadow屬性，以使下拉菜單看起來像一個"card" 。
的:hover選擇用於顯示在下拉菜單中，當用戶在該下拉按鈕移動鼠標。
在導航欄下拉菜單
提示：去我們的CSS教程下拉框 ，以了解更多有關下拉列表。