前端必知必会-CSS下拉菜单

---

CSS 下拉菜单

使用 CSS 创建可悬停的下拉菜单。

演示：下拉菜单示例

基本下拉菜单

创建一个下拉框，当用户将鼠标移到元素上时，该下拉框就会出现。

示例

<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>将鼠标悬停在我身上</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 类包含实际的下拉内容。默认情况下，它是隐藏的，并将在悬停时显示（见下文）。请注意，最小宽度设置为 160px。请随意更改。提示：如果您希望下拉内容的宽度与下拉按钮一样宽，请将宽度设置为 100%（并使用 overflow:auto 以在小屏幕上启用滚动）。

我们没有使用边框，而是使用了 CSS box-shadow 属性使下拉菜单看起来像一张“卡片”。

:hover 选择器用于在用户将鼠标移到下拉按钮上时显示下拉菜单。

下拉菜单

创建一个下拉菜单，允许用户从列表中选择一个选项：

示例

<style>
/* 样式化下拉按钮 */
.dropbtn {
     
     
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}

/* 容器 <div> - 需要定位下拉内容 */
.dropdown {
     
     
position:relative;
display:inline-block;
}

/* 下拉内容（默认隐藏） */
.dropdown-content {
     
     
disp