基本下拉菜單

創(chuàng)建一個下拉框，當(dāng)用戶將鼠標(biāo)移到某個元素上時會出現(xiàn)該下拉框。

例子

<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使用任何元素打開下拉內(nèi)容，例如 <span>或<button>元素。

使用容器元素(如<div>)創(chuàng)建下拉內(nèi)容并在其中添加任何您想要的內(nèi)容。

在元素周圍包裹一個<div>元素以使用 CSS 正確定位下拉內(nèi)容。

CSS的.dropdown類用途position:relative，當(dāng)我們想要的下拉內(nèi)容這是需要正下方的下拉按鈕(使用放置position:absolute)。

本.dropdown-content類保存實際下拉內(nèi)容。默認(rèn)情況下它是隱藏的，將在懸停時顯示(見下文)。注意min-width設(shè)置為 160px。隨意改變這一點。提示：如果您希望下拉內(nèi)容的寬度與下拉按鈕一樣寬，請將 設(shè)置width為 100%(并overflow:auto在小屏幕上啟用滾動)。

我們沒有使用邊框，而是使用 CSSbox-shadow屬性使下拉菜單看起來像一張“卡片”。

該:hover選擇器被用來顯示在下拉菜單中，當(dāng)用戶在該下拉按鈕移動鼠標(biāo)。

下拉式菜單

創(chuàng)建一個下拉菜單，允許用戶從列表中選擇一個選項：

此示例與上一個示例類似，不同之處在于我們在下拉框中添加鏈接并為其設(shè)置樣式以適合樣式化的下拉按鈕：

例子

<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>

右對齊的下拉內(nèi)容

如果您希望下拉菜單從右到左，而不是從左到右，請?zhí)砑?right: 0;

例子

.dropdown-content {
  right: 0;
}

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