本文讲解如何通过精准的 css 选择器和合理的样式作用域，实现导航栏中“仅在当前菜单项悬停时显示对应子菜单”的效果，避免多个子菜单同时展开，并提供可运行的代码示例与关键修复说明。
在构建响应式导航栏时，常见的需求是：当用户将鼠标悬停在某个一级菜单项（如 Products 或 Services）上时，仅该菜单项关联的子菜单（.sub-menu）应显示，其余子菜单必须保持隐藏。但初学者常因 css 作用域设置不当（例如错误地将 overflow: hidden 应用于整个 .menu 容器），导致所有子菜单被统一触发显示，破坏了交互逻辑。
✅ 正确做法：隔离子菜单的可见性控制
核心原则是——将 overflow: hidden 移至 .sub-menu 自身，而非其父级 .menu 容器。这是因为：
- 若 .menu { overflow: hidden }，会强制裁剪其所有子元素（包括未 hover 的 .sub-menu），但更严重的是：某些浏览器在计算 :hover 状态时，可能因布局重排或层叠上下文异常，意外影响兄弟节点的显示状态；
- 而 .sub-menu { overflow: hidden } 结合 max-height + transition，能精准控制单个子菜单的展开/收起动画，且互不干扰。
? 示例代码（scss / CSS）
.menu { display: flex; list-style: none; margin: 0; padding: 0; } .menu-item { position: relative; margin-right: 24px; } .menu-link { display: block; padding: 12px 16px; text-decoration: none; color: #333; font-weight: 500; } /* 子菜单默认隐藏 */ .sub-menu { position: absolute; top: 100%; left: 0; background: #fff; min-width: 200px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); border-radius: 4px; overflow: hidden; /* ✅ 关键：移至此处 */ opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease; // 悬停时激活 .menu-item:hover & { opacity: 1; visibility: visible; transform: translateY(0); } } .sub-menu a { display: block; padding: 10px 16px; color: #555; text-decoration: none; transition: background-color 0.15s; &:hover { background-color: #f5f5f5; color: #007bff; } }⚠️ 注意事项
- 不要给 .menu 设置 overflow: hidden —— 这是原问题的根本原因，它会干扰子元素的定位与悬停检测；
- 使用 visibility: hidden + opacity 组合替代 display: none，以支持 CSS 过渡动画；
- 确保 .sub-menu 的 position: absolute 依赖于 .menu-item { position: relative }，否则定位会偏离；
- 在移动端需额外处理点击展开逻辑（CSS :hover 在触摸设备上不可靠），建议后续结合 javaScript 增强兼容性。
✅ 总结
只需将 overflow: hidden 从父容器 .menu 移至每个 .sub-menu 元素自身，并配合 :hover 伪类精准作用于 .menu-item:hover .sub-menu，即可实现「悬停即显、互不干扰」的子菜单行为。这一方案轻量、无 js 依赖、语义清晰，是现代 CSS 导航交互的最佳实践之一。