基本下拉菜單

創建一個下拉框，當用戶將鼠標移到某個元素上時會出現該下拉框。

例子

<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設置為 160px。隨意改變這一點。提示：如果您希望下拉內容的寬度與下拉按鈕一樣寬，請將 設置width為 100%(并overflow:auto在小屏幕上啟用滾動)。

我們沒有使用邊框，而是使用 CSSbox-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);
  z-index: 1;
}
/* 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;
}

以上就是動力節點小編介紹的"CSS下拉菜單示例"，希望對大家有幫助，想了解更多可查看Java教程。動力節點在線學習教程，針對沒有任何Java基礎的讀者學習,讓你從入門到精通,主要介紹了一些Java基礎的核心知識，讓同學們更好更方便的學習和了解Java編程，感興趣的同學可以關注一下。