本文将介绍如何使用纯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 等，来定制更丰富的下拉菜单效果。