本文介绍了如何仅使用 CSS 实现鼠标悬停时展开的下拉菜单，无需依赖任何 JavaScript框架。提供了三种不同的 CSS 实现方案，分别通过 display、height 和 opacity属性来控制下拉菜单的显示与隐藏，并附带相应的 HTML 结构示例，帮助开发者快速构建交互性强的导航菜单。
下拉菜单是网页设计中常见的交互元素，可以有效地组织和展示大量链接，提升用户体验。通常，下拉菜单的实现需要 JavaScript 配合 CSS 来完成，但实际上，仅使用 CSS 也可以实现简单的鼠标悬停下拉效果。本文将介绍三种不同的 CSS 实现方法，并提供相应的 HTML 结构，帮助你轻松构建自己的下拉菜单。
方法一：使用 display 属性
这种方法通过控制 display 属性的显示与隐藏来实现下拉效果。默认情况下，下拉菜单的内容是隐藏的，当鼠标悬停在父元素上时，将其 display 属性设置为 block，从而显示下拉菜单。
CSS 代码：
立即学习“前端免费学习笔记（深入）”；
.nav-item a {
display: block; /* 确保链接占据整个区域 */
}
.dropdown-menu-1 {
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; /* 确保在其他元素之上 */
}
li.dropdown-1:hover > .dropdown-menu-1 {
display: block; /* 鼠标悬停时显示下拉菜单 */
}HTML 代码：
<ul class="navbar-nav">
<li class="nav-item dropdown-1">
<a class="nav-link dropdown-toggle" id="navbarDropdown">Category</a>
<div class="dropdown-menu-1">
<a href="#">Login</a>
<a href="#">Another action</a>
<a href="#">Something else here</a>
</div>
</li>
</ul>注意事项：
- position: absolute 属性可以根据实际布局需要进行调整，例如改为 position: relative 并配合 top 和 left 属性进行定位。
- z-index 属性用于控制元素的堆叠顺序，确保下拉菜单显示在其他元素之上。
- 需要确保父元素 li.dropdown-1 的 position 属性不为 static (默认为 static)，否则绝对定位的下拉菜单会相对于文档根元素进行定位。
方法二：使用 height 和 overflow 属性
这种方法通过控制 height 属性来实现下拉效果。默认情况下，下拉菜单的高度为 0，并设置 overflow: hidden，使其内容隐藏。当鼠标悬停在父元素上时，将高度设置为 auto，从而显示下拉菜单。
CSS 代码：
立即学习“前端免费学习笔记（深入）”；
.nav-item a {
display: block;
}
.dropdown-menu-2 {
height: 0; /* 默认高度为 0 */
overflow: hidden; /* 隐藏超出高度的内容 */
transition: height 0.3s ease; /* 添加过渡效果 */
position: absolute; /* 根据需要调整定位 */
background-color: #f9f9f9; /* 设置背景色 */
min-width: 160px; /* 设置最小宽度 */
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* 添加阴影效果 */
z-index: 1; /* 确保在其他元素之上 */
}
li.dropdown-2:hover > .dropdown-menu-2 {
height: auto; /* 鼠标悬停时自动调整高度 */
}HTML 代码：
<ul class="navbar-nav">
<li class="nav-item dropdown-2">
<a class="nav-link dropdown-toggle" id="navbarDropdown">Category</a>
<div class="dropdown-menu-2">
<a href="#">Login</a>
<a href="#">Another action</a>
<a href="#">Something else here</a>
</div>
</li>
</ul>注意事项：
- transition 属性可以添加过渡效果，使下拉菜单的显示更加平滑。
- 这种方法需要预先知道下拉菜单内容的高度，否则可能出现显示不完整的情况。
方法三：使用 opacity 和 pointer-events 属性
这种方法通过控制 opacity 和 pointer-events 属性来实现下拉效果。默认情况下，下拉菜单的透明度为 0，并且 pointer-events 设置为 none，使其无法被点击。当鼠标悬停在父元素上时，将透明度设置为 1，并且 pointer-events 设置为 all，使其可以被点击。
CSS 代码：
立即学习“前端免费学习笔记（深入）”；
.nav-item a {
display: block;
}
.dropdown-menu-3 {
opacity: 0; /* 默认透明度为 0 */
pointer-events: none; /* 禁用点击事件 */
transition: opacity 0.3s ease; /* 添加过渡效果 */
position: absolute; /* 根据需要调整定位 */
background-color: #f9f9f9; /* 设置背景色 */
min-width: 160px; /* 设置最小宽度 */
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* 添加阴影效果 */
z-index: 1; /* 确保在其他元素之上 */
}
li.dropdown-3:hover > .dropdown-menu-3 {
opacity: 1; /* 鼠标悬停时显示 */
pointer-events: all; /* 启用点击事件 */
}HTML 代码：
<ul class="navbar-nav">
<li class="nav-item dropdown-3">
<a class="nav-link dropdown-toggle" id="navbarDropdown">Category</a>
<div class="dropdown-menu-3">
<a href="#">Login</a>
<a href="#">Another action</a>
<a href="#">Something else here</a>
</div>
</li>
</ul>注意事项：
- transition 属性可以添加过渡效果，使下拉菜单的显示更加平滑。
- 这种方法在隐藏下拉菜单时，虽然内容不可见，但仍然占据空间。
总结
本文介绍了三种仅使用 CSS 实现鼠标悬停下拉菜单的方法。每种方法都有其优缺点，可以根据实际需求选择合适的方法。在实际应用中，还可以结合 CSS 预处理器（如 Sass 或 Less）来简化代码，提高开发效率。希望本文能够帮助你更好地理解和应用 CSS，构建更加美观和易用的网页。
