如何使用 CSS 实现导航栏中仅显示当前悬停菜单项的子菜单-js教程-PHP中文网

如何使用 CSS 实现导航栏中仅显示当前悬停菜单项的子菜单

通过精准控制 css 选择器与 `overflow` 属性的作用范围，可实现仅在鼠标悬停指定主菜单项时显示其对应子菜单，避免其他子菜单意外展开。关键在于将 `overflow: hidden` 从父级菜单容器移至每个独立的 `.sub-menu` 元素上。

要实现“仅显示当前悬停主菜单项的子菜单”，核心在于隔离子菜单的可见性控制逻辑，而非依赖父容器统一裁剪。常见错误是将 overflow: hidden 应用于整个 .menu 容器（如导航栏 ul），这会导致所有子菜单被强制隐藏，而悬停触发时又因缺乏精确作用域，引发多个子菜单同时显示。

✅ 正确做法是：

为每个
下的 .sub-menu 单独设置 overflow: hidden；
初始状态设为 opacity: 0、visibility: hidden、height: 0 或 max-height: 0（推荐 max-height 配合过渡）；
悬停 .menu-item 时，仅对其内部的 .sub-menu 应用 max-height: 300px（或足够容纳内容的值）、opacity: 1、visibility: visible。

以下是精简可靠的 HTML + CSS 示例：

CSS

CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。

下载

<nav class="header-nav"><ul class="menu">
<li class="menu-item">
      <a href="#">Products</a>
      <ul class="sub-menu">
<li><a href="#">Laptops</a></li>
        <li><a href="#">Phones</a></li>
      </ul>
</li>
    <li class="menu-item">
      <a href="#">Services</a>
      <ul class="sub-menu">
<li><a href="#">Support</a></li>
        <li><a href="#">Consulting</a></li>
      </ul>
</li>
  </ul></nav>

.menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.menu-item {
  position: relative;
}

.menu-item > a {
  display: block;
  padding: 12px 20px;
  text-decoration: none;
}

/* 关键：子菜单独立控制 */
.sub-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  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;
  overflow: hidden; /* ✅ 移至此处，而非 .menu 上 */
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  transition: 
    max-height 0.3s ease-out,
    opacity 0.2s ease,
    visibility 0.2s;
}

.menu-item:hover .sub-menu {
  max-height: 300px; /* 设为合理上限（避免过渡失效）*/
  opacity: 1;
  visibility: visible;
}

.sub-menu li a {
  display: block;
  padding: 10px 16px;
  color: #333;
  text-decoration: none;
}

.sub-menu li a:hover {
  background-color: #f5f5f5;
}

⚠️ 注意事项：

max-height 过渡需设定明确数值（不能用 auto），否则 CSS 无法计算过渡路径；若子菜单高度差异大，可预估最大可能高度（如 max-height: 400px）；
overflow: hidden 必须保留在 .sub-menu 上，确保 max-height 裁剪生效；
若使用 display: none/block，则无法添加 CSS 过渡效果——应优先选用 visibility + opacity + max-height 组合；
在移动端需额外处理点击展开（本例聚焦纯 CSS 悬停，适用于桌面端；响应式场景建议配合 JavaScript 增强交互）。

总结：问题本质是 CSS 作用域误用。修正的关键不在于新增复杂逻辑，而是将 overflow: hidden 精准下放到每个 .sub-menu 元素，再结合 :hover 伪类定向激活，即可实现干净、可维护、无干扰的单子菜单展开效果。