最新的Web開發教程
 

CSS下拉菜單


創建CSS一個hoverable下拉。


演示:下拉例子

將鼠標移到下面的例子:


基本下拉

創建當用戶在一個元素上移動鼠標時出現一個下拉框。

<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> Mouse over me </span>
  <div class="dropdown-content">
    <p> Hello World! </p>
  </div>
</div>
試一試»

例子解釋:

HTML)使用任何元素來打開下拉內容,例如一個<span><button>元素。

使用容器元素(如<div>來創建下拉內容,並添加任何你想要它裡面。

緊裹<div>元素中的元素周圍下拉內容與CSS正確定位。

CSS).dropdown類使用position:relative ,當我們要下拉的內容(使用置於下方的下拉按鈕,這是需要position:absolute )。

.dropdown-content類包含的實際內容的下拉列表。 它默認是隱藏的,並會顯示懸停(見下文)。 注意min-width被設置為160像素。 隨意更改此提示:如果你想在下拉菜單內容的寬度為寬作為下拉按鈕,設定width為100%(和overflow:auto ,以使在小屏幕上滾動)。

而不是使用一個邊界,我們使用了CSS3 box-shadow屬性,以使下拉菜單看起來像一個“一卡通”。

:hover選擇器是用來顯示在下拉菜單中,當用戶在下拉按鈕移動鼠標。


下拉式菜單

創建一個下拉菜單,允許用戶從列表中選擇一個選項:

這個例子類似於上一個,除了我們添加鏈接的下拉框內部,他們的風格,以適應風格的下拉按鈕:

<style>
/* Style The 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;
}
</style>

<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>
試一試»

右對齊下拉內容

如果你想在下拉菜單中從右到左,而不是從左到右,加right: 0;

.dropdown-content {
    right: 0;
}
試一試»

例子

更多示例

下拉菜單圖片
這個例子演示了如何添加下拉框內的圖像和其他內容。

下拉導航欄
這個例子演示了如何添加一個導航欄裡面的一個下拉菜單。