本文将介绍如何使用纯CSS实现鼠标悬停触发的下拉菜单，无需依赖任何JavaScript框架。
实现原理
核心思想是利用CSS的 :hover 伪类来检测鼠标悬停状态，并结合子选择器 (>) 来控制下拉菜单的显示和隐藏。通过控制 display、height 或 opacity 属性，可以实现不同的下拉动画效果。
实现方式一：使用 display 属性
这是最直接的方式，初始时将下拉菜单设置为隐藏，当鼠标悬停在父元素上时，将其显示出来。
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>注意事项：
- display: block; 确保链接元素占据父元素的全部宽度，使得悬停区域更大。
- position: absolute; 可以将下拉菜单从文档流中移除，防止其影响其他元素的布局。
- z-index: 1; 确保下拉菜单在其他元素之上显示。
实现方式二：使用 height 属性
这种方式通过控制 height 属性来实现下拉动画效果。初始时将下拉菜单的高度设置为 0，并隐藏溢出内容，当鼠标悬停时，将高度设置为 auto。
CSS 代码：
立即学习“前端免费学习笔记（深入）”；
.nav-item a {
display: block;
}
.dropdown-menu-2 {
height: 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>注意事项：
- overflow: hidden; 隐藏初始状态下超出高度的内容。
- transition: height 0.3s ease; 添加平滑的过渡效果，使下拉动画更自然。
实现方式三：使用 opacity 和 pointer-events 属性
这种方式通过控制 opacity 和 pointer-events 属性来实现下拉效果。初始时将下拉菜单设置为透明且不可点击，当鼠标悬停时，将其设置为完全可见且可点击。
CSS 代码：
立即学习“前端免费学习笔记（深入）”；
.nav-item a {
display: block;
}
.dropdown-menu-3 {
opacity: 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>注意事项：
- pointer-events: none; 防止初始状态下用户点击到隐藏的下拉菜单项。
- transition: opacity 0.3s ease; 添加平滑的过渡效果，使下拉动画更自然。
总结
以上三种方式都可以实现鼠标悬停触发的下拉菜单，选择哪种方式取决于具体的需求和偏好。 display 方式最简单直接，但没有动画效果。 height 方式和 opacity 方式都提供了平滑的动画效果，可以根据实际情况选择。 在实际应用中，可以根据项目的具体需求，结合CSS的其他属性，如 transform、box-shadow 等，来定制更丰富的下拉菜单效果。
