資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 CSS 建立懸停下拉選單？
懸停下拉選單是在我們懸停在該下拉選單上時開啟的下拉選單。這種下拉選單大多用於頭部選單。如果使用者將滑鼠懸停在頭部選單的任何元素上，它將自動開啟並呈現該下拉選單的內容。
建立懸停下拉選單的步驟
在開始建立懸停下拉選單之前，我們將首先使用 HTML 建立下拉選單結構。
步驟 1 - 新增 HTML：在這裡，我們將建立下拉選單結構，為此我們可以使用<button>、<a>或<p>任何元素。在本文中，我們將使用按鈕元素。
<div class="dropdown-menu">
<button class="menu-btn">Web Technology</button>
<div class="menu-content">
<a class="links" href="#">HTML</a>
<a class="links" href="#">CSS</a>
<a class="links" href="#">JavaScript</a>
</div>
步驟 2 - 新增 CSS：現在，我們將在.dropdown-menu類上設定"position: relative;"，以便選單可以使用"position: absolute"正好渲染在下拉按鈕下方。為了在使用者懸停在它上面之前隱藏下拉內容，我們將在.menu-content類上使用"display: none;"。其餘我們需要根據需要定義其他屬性，例如我們希望如何設計下拉選單。
.menu-btn {
background-color: #06D001;
color: #F3FF90;
padding: 8px;
border-radius: 2px;
font-size: 12px;
font-weight: bolder;
border: none;
}
.dropdown-menu {
position: relative;
display: inline-block;
}
.menu-content {
display: none;
position: absolute;
background-color: gray;
z-index: 1;
}
.links {
padding: 8px;
border-radius: 2px;
border-radius: 2px;
color: #F3FF90;
text-decoration: none;
display: block;
font-size: 12px;
border-bottom: 1px solid lightgray;
min-width: 95px;
}
.links:hover {
background-color: #06D001;
}
.dropdown-menu:hover .menu-content {
display: block;
}
.dropdown-menu:hover .menu-btn {
background-color: #059212;
}
完整示例程式碼
在下面的示例中，我們將上述步驟的虛擬碼組合成完整的程式碼，以實現懸停下拉選單。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
.menu-btn {
background-color: #06D001;
color: #F3FF90;
padding: 8px;
border-radius: 2px;
font-size: 12px;
font-weight: bolder;
border: none;
}
.dropdown-menu {
position: relative;
display: inline-block;
}
.menu-content {
display: none;
position: absolute;
background-color: gray;
z-index: 1;
}
.links {
padding: 8px;
border-radius: 2px;
border-radius: 2px;
color: #F3FF90;
text-decoration: none;
display: block;
font-size: 12px;
border-bottom: 1px solid lightgray;
min-width: 95px;
}
.links:hover {
background-color: #06D001;
}
.dropdown-menu:hover .menu-content {
display: block;
}
.dropdown-menu:hover .menu-btn {
background-color: #059212;
}
</style>
</head>
<body>
<h3>Hoverable Dropdown</h3>
<p>
Here we have used display property to hide
and render dropdown content and other properties
are used to decorate the dropdown.</p>
<div class="dropdown-menu">
<button class="menu-btn">Web Technology</button>
<div class="menu-content">
<a class="links" href="#">HTML</a>
<a class="links" href="#">CSS</a>
<a class="links" href="#">JavaScript</a>
</div>
</div>
</body>
</html>
結論
在本文中，我們學習瞭如何使用 HTML 和 CSS 建立懸停下拉選單。在使用者懸停在它上面之前保持下拉選單隱藏，並在使用者懸停在元素上時呈現，這是需要記住的最重要部分。
更新於：2024年6月27日
3K+ 閱讀量
廣告