本文介绍了如何使用纯 CSS 实现鼠标悬停时展开的下拉菜单，无需依赖任何 JavaScript 框架。通过 :hover 伪类和子选择器，我们可以轻松地控制下拉菜单的显示与隐藏，并提供了三种不同的实现方式，分别通过控制 display、height 和 opacity 属性来实现下拉效果。
使用 CSS 实现悬停下拉菜单
在网页设计中，下拉菜单是一种常见的导航方式，可以有效地组织和呈现大量链接。通常，下拉菜单需要通过 JavaScript 来实现，但使用纯 CSS 也可以实现简单的悬停下拉菜单，无需任何 JavaScript 代码。这不仅可以减少代码量，还可以提高网页的加载速度。
以下将介绍三种不同的纯 CSS 实现悬停下拉菜单的方法。
方法一：控制 display 属性
这种方法通过控制下拉菜单的 display 属性来实现显示和隐藏。默认情况下，下拉菜单的 display 属性设置为 none，当鼠标悬停在父元素上时，将其设置为 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>Login</a>
<a>Another action</a>
<a>Something else here</a>
</div>
</li>
</ul>CSS 代码：
.nav-item a {
display: block;
}
.dropdown-menu-1 {
display: none;
}
li.dropdown-1:hover > .dropdown-menu-1 {
display: block;
}解释：
- .nav-item a：确保链接以块级元素显示，以便占据整个宽度。
- .dropdown-menu-1：默认隐藏下拉菜单。
- li.dropdown-1:hover > .dropdown-menu-1：当鼠标悬停在 li 元素上时，显示下拉菜单。> 符号表示直接子元素选择器，确保只选择当前 li 元素下的 dropdown-menu-1。
方法二：控制 height 属性
这种方法通过控制下拉菜单的 height 属性来实现动画效果。默认情况下，下拉菜单的 height 属性设置为 0 和 overflow: hidden，当鼠标悬停在父元素上时，将其设置为 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>Login</a>
<a>Another action</a>
<a>Something else here</a>
</div>
</li>
</ul>CSS 代码：
.dropdown-menu-2 {
height: 0;
overflow: hidden;
}
li.dropdown-2:hover > .dropdown-menu-2 {
height: auto;
}解释：
- .dropdown-menu-2：默认隐藏下拉菜单，并将高度设置为 0。overflow: hidden 确保内容超出高度时被隐藏。
- li.dropdown-2:hover > .dropdown-menu-2：当鼠标悬停在 li 元素上时，将高度设置为 auto，使下拉菜单展开。
方法三：控制 opacity 属性
这种方法通过控制下拉菜单的 opacity 属性来实现淡入淡出的效果。默认情况下，下拉菜单的 opacity 属性设置为 0 和 pointer-events: none，当鼠标悬停在父元素上时，将其设置为 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>Login</a>
<a>Another action</a>
<a>Something else here</a>
</div>
</li>
</ul>CSS 代码：
.dropdown-menu-3 {
opacity: 0;
pointer-events: none;
}
li.dropdown-3:hover > .dropdown-menu-3 {
opacity: 1;
pointer-events: all;
}解释：
- .dropdown-menu-3：默认隐藏下拉菜单，并将透明度设置为 0。pointer-events: none 确保鼠标事件不会穿透下拉菜单。
- li.dropdown-3:hover > .dropdown-menu-3：当鼠标悬停在 li 元素上时，将透明度设置为 1，使下拉菜单显示，并将 pointer-events 设置为 all，使其可以响应鼠标事件。
总结
以上三种方法都可以实现纯 CSS 的悬停下拉菜单。选择哪种方法取决于具体的需求和设计风格。第一种方法简单直接，但没有动画效果。第二种方法可以实现简单的展开动画，第三种方法可以实现淡入淡出的动画效果。在实际应用中，可以根据需要进行调整和优化，例如添加过渡效果，使其更加平滑自然。
注意事项：
- 确保父元素（li）具有明确的高度或宽度，以便下拉菜单能够正确显示。
- 可以使用 CSS 过渡（transition）属性来添加动画效果，例如 transition: height 0.3s ease-in-out;。
- 对于更复杂的下拉菜单，可能需要使用 JavaScript 来实现更高级的功能。
