本文详解多级下拉菜单中 hover 不生效的根本原因（子元素层级关系误判）、正确使用相邻兄弟选择器 `+` 替代子选择器 `>`，并同步解决二级下拉框顶部空白、`visibility: hidden` 无效等常见陷阱。
在构建多级导航菜单（如“Services → Climate Policy & Sustainability → Energy”）时，CSS :hover 失效是高频痛点。你遇到的问题本质并非代码“写错了”，而是DOM 结构与 CSS 选择器逻辑不匹配：你原用 .cps:hover > ul 试图通过子选择器（>）触发二级菜单显示，但实际 HTML 中
- 并非 .cps 元素的直接子元素，而是其紧邻的下一个兄弟元素（即同级、后置）。
观察关键 HTML 片段：
<a class="cps" href="#">Climate Policy & Sustainability ...</a> <ul class="d2" style="list-style-type: none;"> <li><a href="#" class="dropdown2">Energy</a></li> <li><a href="#" class="dropdown2">Thermal Consumption</a></li> </ul>
这里
- 与 是平级兄弟关系，且
-
添加过渡动画（提升体验）：
.d2 { opacity: 0; transform: translateY(-5px); transition: opacity 0.2s ease, transform 0.2s ease; } .cps:hover + ul { display: block; opacity: 1; transform: translateY(0); } -
修复定位偏移：.d2 的 left: 100% 使其左边缘对齐 .cps 右边缘，但若 .cps 内容高度不一，需确保 top: 0 对齐。建议给 .cps 添加 position: relative，使 .d2 相对于它定位：
.cps { position: relative; /* ? 确保 .d2 绝对定位参考点正确 */ } .d2 { position: absolute; top: 0; left: 100%; } - 结构决定选择器：始终检查 DOM 层级关系，兄弟用 + 或 ~，父子用 >，后代用空格。
- 避免 visibility 用于下拉菜单：它会破坏悬停连续性，坚持用 display。
- 重置列表默认样式：margin/padding/list-style 是二级菜单出现空白的主因。
- z-index 分层：确保 .d2 的 z-index 高于其他元素（如设为 2），防止被遮挡。
- 紧跟在 之后。因此，必须将 CSS 规则从：
.cps:hover > ul { display: block; } /* ❌ 错误：ul 不是 cps 的子元素 */修正为：
立即学习“前端免费学习笔记（深入）”；
.cps:hover + ul { display: block; } /* ✅ 正确：ul 是 cps 的相邻兄弟元素 */✅ 完整修复方案
1. 核心 CSS 修正（关键！）
/* 移除错误的子选择器，改用相邻兄弟选择器 */
.cps:hover + ul {
display: block;
}2. 消除二级下拉框顶部空白
你提到的“2个空选项框”实为
- 默认的 margin-top 和浏览器默认样式残留。添加以下重置：
.d2 {
position: absolute;
left: 100%;
top: 0;
background-color: #f9f9f9;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
z-index: 2;
display: none;
margin: 0; /* ? 关键：清除默认外边距 */
padding: 0; /* ? 关键：清除默认内边距 */
list-style: none; /* ? 确保无项目符号 */
}
.d2 li {
margin: 0; /* 防止 li 自带间距 */
}
.d2 a {
display: block;
padding: 10px 16px;
color: #333;
text-decoration: none;
}
.d2 a:hover {
background-color: #e9ecef;
}3. 为什么 visibility: hidden 不生效？
visibility: hidden 仅隐藏元素但保留其占据的空间，且不影响 hover 事件穿透性——当父容器（如 .cps）被 hover 时，若二级菜单用 visibility: hidden，它虽不可见但仍存在布局流中，可能干扰鼠标指针路径，导致 hover 区域判定异常。而 display: none 彻底移出渲染树，确保悬停区域纯净、响应精准。✅ 始终对下拉菜单使用 display: none/block 控制显隐，而非 visibility。
4. 增强健壮性的建议
⚠️ 注意事项总结
按此方案调整后，“Services” → “Climate Policy & Sustainability” → “Energy” 的三级悬停链将完全响应，无空白、无延迟、无穿透失效。多级菜单的稳定性，始于对 CSS 选择器与 HTML 结构关系的精准把握。
