数据结构
网络
关系数据库管理系统
操作系统
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+ 阅读量
广告