本文详解如何通过 css 正确实现头部导航栏中“仅在悬停对应主菜单项时显示其专属子菜单”的交互效果，避免多个子菜单同时展开，并提供可运行的代码示例与关键修复要点。
本文详解如何通过 css 正确实现头部导航栏中“仅在悬停对应主菜单项时显示其专属子菜单”的交互效果，避免多个子菜单同时展开，并提供可运行的代码示例与关键修复要点。
在构建响应式头部导航时，常见的下拉式子菜单（sub-menu）需满足“按需显示”原则：即只有当用户鼠标悬停在某个主菜单项（如 Products 或 Services）上时，仅该菜单项关联的子菜单应展开，其余子菜单必须保持隐藏。然而，许多开发者会遇到一个典型问题：所有 .sub-menu 元素同时显示，破坏了用户体验和视觉逻辑。
根本原因往往在于 CSS 选择器作用域与盒模型属性的误用。例如，在原始实现中，若将 overflow: hidden 应用于整个 .menu 容器（即包含所有主菜单项的父级），它会强制截断内部所有子元素的溢出内容——但这并不阻止子菜单的 display 或 visibility 状态变化；更关键的是，若子菜单的显示逻辑依赖于 .menu:hover .sub-menu 这类宽泛选择器，则一旦任一菜单项被悬停，整个 .menu 容器即触发 :hover，导致所有 .sub-menu 被统一激活。
✅ 正确解法是：将 overflow: hidden 移至每个独立的 .sub-menu 元素上，并配合精确的层级悬停选择器。这样既能确保单个子菜单在展开时自身内容不溢出（如文字换行、图标错位），又可通过 li:hover > .sub-menu 等强关联选择器，精准控制仅当前菜单项的直属子菜单响应悬停。
以下是精简可靠的 HTML + CSS 示例：
立即学习“前端免费学习笔记（深入）”；
<header class="header">
<nav class="menu">
<ul>
<li><a href="#">Home</a></li>
<li class="has-submenu">
<a href="#">Products</a>
<ul class="sub-menu">
<li><a href="#">Laptops</a></li>
<li><a href="#">Phones</a></li>
</ul>
</li>
<li class="has-submenu">
<a href="#">Services</a>
<ul class="sub-menu">
<li><a href="#">Support</a></li>
<li><a href="#">Consulting</a></li>
</ul>
</li>
</ul>
</nav>
</header>.menu ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
.menu li {
position: relative;
}
.menu a {
display: block;
padding: 12px 16px;
text-decoration: none;
color: #333;
}
/* 关键：仅对子菜单本身设置 overflow:hidden */
.sub-menu {
position: absolute;
top: 100%;
left: 0;
background: #fff;
min-width: 200px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
border-radius: 4px;
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition: all 0.25s ease;
overflow: hidden; /* ✅ 正确位置：作用于每个 sub-menu 实例 */
}
/* 精准悬停：仅当前 li 的直接子 .sub-menu 生效 */
.has-submenu:hover > .sub-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* 可选：增强可访问性，支持键盘聚焦 */
.has-submenu:focus-within > .sub-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}⚠️ 注意事项：
- 避免使用 .menu:hover .sub-menu：该选择器无差别匹配所有子菜单，是多菜单同时展开的根源；
- .sub-menu 必须为 .has-submenu 的直接子元素，才能使 >（子选择器）生效；
- overflow: hidden 放在 .sub-menu 上，可防止其内部浮动/绝对定位内容溢出容器边界，提升渲染稳定性；
- 建议补充 focus-within 支持，以满足无障碍（WCAG）要求，让键盘用户也能展开菜单；
- 若需移动端支持，后续应结合 JavaScript 切换 active 类或使用 @media 添加点击展开逻辑。
通过以上结构化样式设计，即可在不依赖 JavaScript 的前提下，实现专业、稳定、可访问的纯 CSS 头部子菜单控制方案。
