本文详解 css 多级下拉菜单中 hover 失效的根本原因（子元素结构误判、选择器关系错误），提供正确使用相邻兄弟选择器 `+` 替代子选择器 `>` 的关键修复，并同步解决二级菜单顶部空白、`visibility:hidden` 无效等常见问题。

在构建多级导航菜单时，一个高频问题是：一级菜单（如“Services”）能正常展开二级下拉，但点击/悬停二级项（如“Climate Policy & Sustainability”）后，其右侧的三级子菜单（.d2）始终不显示。这并非浏览器兼容性或 JavaScript 干扰所致，而是由 HTML 结构与 CSS 选择器逻辑不匹配 引起的核心错误。

? 根本原因分析

观察原始 HTML 片段：

Climate Policy & Sustainability ...

  
Energy
  
Thermal Consumption

可见

是 的紧邻后续兄弟元素（next sibling），而非其子元素（child）。而原 CSS 规则：

.cps:hover > ul { display: block; } /* ❌ 错误：> 表示子元素 */

强制要求 ul 必须是 .cps 的直接子元素，但实际结构中二者是平级兄弟关系 —— 因此该规则永远不匹配，display: block 永远不会触发。

✅ 正确写法应为：

.cps:hover + ul { display: block; }

+ 是相邻兄弟选择器（adjacent sibling combinator），精准匹配「紧接在 .cps 后面的 ul 元素」，完美对应 DOM 结构。

✅ 完整修复方案（含结构优化）

1. 修正核心 hover 规则
   将原 .cps:hover > ul 替换为：

   .cps:ho
   ver + ul {
     display: block;
   }

2. 清除二级菜单顶部空白（“2个空选项框”）
   问题源于 标签内嵌了 SVG 图标、文本和

   ，但未对行内元素进行垂直对齐控制，导致基线错位产生视觉空白。添加以下样式可彻底消除：

   .cps {
     display: flex;
     align-items: center;
     gap: 0.5em; /* 统一图标与文字间距 */
   }
   .cps svg {
     flex-shrink: 0; /* 防止 SVG 被压缩 */
   }
   .cps + ul {
     margin: 0; /* 移除默认 ul 上下边距 */
     padding: 0;
     top: 0; /* 确保绝对定位起点对齐 */
   }

3. 为什么 visibility: hidden 不生效？
   visibility: hidden 仅隐藏元素但保留其文档流空间，而 .d2 使用 position: absolute，其 visibility 状态不影响父容器布局，但若父级（.cps）本身无明确高度或 overflow: visible，可能被裁剪。更可靠的做法始终是 display: none/block —— 因为 display 直接控制元素是否参与渲染，与定位行为完全兼容。切勿用 visibility 替代 display 控制下拉显隐。

4. 增强交互健壮性（推荐）
   为防止鼠标移出 .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 下拉菜单。