下拉菜单（Dropdown Menu）是网页设计中常见的交互元素，用于在有限的空间内展示多个选项。用户可以通过点击或悬停来展开菜单，选择其中的选项。下拉菜单通常用于导航栏、表单选择、设置选项等场景。以下是一个详细的下拉菜单代码示例及其解释。
1. HTML 结构
首先，我们需要创建一个基本的 HTML 结构来定义下拉菜单的内容。通常，下拉菜单由一个按钮和一个包含选项的列表组成。
“`html
“`
2. CSS 样式
接下来，我们使用 CSS 来美化下拉菜单，并控制其显示和隐藏。
“`css
/ 基本样式 /
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: f4f4f4;
}
/ 下拉菜单容器 /
.dropdown {
position: relative;
display: inline-block;
}
/ 下拉按钮样式 /
.dropbtn {
background-color: 4CAF50;
color: white;
padding: 10px 20px;
font-size: 16px;
border: none;
cursor: pointer;
border-radius: 4px;
}
/ 鼠标悬停时按钮样式 /
.dropbtn:hover {
background-color: 45a049;
}
/ 下拉内容（隐藏状态） /
.dropdown-content {
display: none;
position: absolute;
background-color: f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
z-index: 1;
border-radius: 4px;
}
/ 下拉菜单中的链接样式 /
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/ 鼠标悬停时链接样式 /
.dropdown-content a:hover {
background-color: f1f1f1;
}
/ 显示下拉菜单 /
.dropdown:hover .dropdown-content {
display: block;
}
“`
3. JavaScript 交互（可选）
如果你希望在下拉菜单中添加更多的交互功能，比如点击按钮时展开菜单，而不是通过悬停，可以使用 JavaScript 来实现。
“`html
“`
4. 解释与说明
– HTML 结构：`