本文详解 css 多级下拉菜单中 hover 失效的根本原因（子元素结构误判、选择器关系错误），提供正确使用相邻兄弟选择器 `+` 替代子选择器 `>` 的关键修复，并同步解决二级菜单顶部空白、`visibility:hidden` 无效等常见问题。
在构建多级导航菜单时，一个高频问题是：一级菜单（如“Services”）能正常展开二级下拉，但点击/悬停二级项（如“Climate Policy & Sustainability”）后，其右侧的三级子菜单（.d2）始终不显示。这并非浏览器兼容性或 javaScript 干扰所致，而是由 html 结构与 css 选择器逻辑不匹配 引起的核心错误。
? 根本原因分析
观察原始 HTML 片段：
Climate Policy & Sustainability ... 可见
- 是 的紧邻后续兄弟元素（next sibling），而非其子元素（child）。而原 CSS 规则：
.cps:hover > ul { display: block; } /* ❌ 错误：> 表示子元素 */强制要求 ul 必须是 .cps 的直接子元素，但实际结构中二者是平级兄弟关系 —— 因此该规则永远不匹配，display: block 永远不会触发。
立即学习“前端免费学习笔记（深入）”；
✅ 正确写法应为：
.cps:hover + ul { display: block; }+ 是相邻兄弟选择器（adjacent sibling combinator），精准匹配「紧接在 .cps 后面的 ul 元素」，完美对应 dom 结构。
✅ 完整修复方案（含结构优化）
.cps { display: flex; align-items: center; gap: 0.5em; /* 统一图标与文字间距 */ } .cps svg { flex-shrink: 0; /* 防止 SVG 被压缩 */ } .cps + ul { margin: 0; /* 移除默认 ul 上下边距 */ padding: 0; top: 0; /* 确保绝对定位起点对齐 */ }为什么 visibility: hidden 不生效？
visibility: hidden 仅隐藏元素但保留其文档流空间，而 .d2 使用 position: absolute，其 visibility 状态不影响父容器布局，但若父级（.cps）本身无明确高度或 overflow: visible，可能被裁剪。更可靠的做法始终是 display: none/block —— 因为 display 直接控制元素是否参与渲染，与定位行为完全兼容。切勿用 visibility 替代 display 控制下拉显隐。
增强交互健壮性（推荐）
为防止鼠标移出 .cps 时三级菜单闪退，可增加微小延迟过渡：
.d2 { opacity: 0; transform: translateX(10px); transition: opacity 0.2s ease, transform 0.2s ease; } .cps:hover + ul { display: block; opacity: 1; transform: translateX(0); }? 最终验证要点
- ✅ 悬停 “Services” → 二级菜单 .dropdown-content 正常展开（依赖 .dropdown:hover .dropdown-content）
- ✅ 悬停 “Climate Policy…” 项 → 右侧三级菜单 .d2 立即平滑展开（依赖 .cps:hover + ul）
- ✅ 鼠标从 .cps 移至 .d2 内任意链接，菜单持续显示（无闪退）
- ✅ 移除所有意外空白区域，图标、文字、箭头、子菜单纵向对齐紧凑
? 关键提醒：多级下拉的本质是「结构即逻辑」。务必先绘制 DOM 树确认父子/兄弟关系，再选择 >, +, ~ 等组合器 —— 这比调试 z-index 或 transition 更底层、更决定成败。
通过以上修正，你的多级导航将具备生产级稳定性与专业交互体验，无需依赖 javascript 即可实现流畅、可访问的纯 CSS 下拉菜单。