本文讲解如何通过精准的 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 导航交互的最佳实践之一。
