如何用CSS实现Header中仅hover菜单对应sub-menu的显示与隐藏

核心思路 #

问题根源在于当前CSS选择器未关联「触发hover的菜单」与「对应子菜单」，导致hover事件会触发所有子菜单同时显示。解决关键是利用DOM层级关系，让hover事件仅作用于当前菜单内部的子菜单。

具体实现步骤 #

假设你的菜单DOM结构为常见嵌套形式：

<header class="header">
  <div class="menu-item">
    <span>菜单1</span>
    <div class="sub-menu">子菜单内容1</div>
  </div>
  <div class="menu-item">
    <span>菜单2</span>
    <div class="sub-menu">子菜单内容2</div>
  </div>
</header>

1. 默认隐藏所有子菜单
   先给所有子菜单设置默认隐藏样式：

.sub-menu {
  display: none;
  /* 保留你原本的子菜单样式，如定位、背景、内边距等 */
}

2. 关联hover事件与对应子菜单
   使用父子选择器，仅当hover某个.menu-item时，显示其内部的.sub-menu：

.menu-item:hover .sub-menu {
  display: block;
}

适配嵌套列表结构 #

如果你的菜单是<ul>/<li>嵌套结构，逻辑完全一致，只需调整选择器层级：

<header>
  <ul class="main-menu">
    <li class="menu-item">
      <a href="#">菜单1</a>
      <ul class="sub-menu">
        <li>子选项1</li>
        <li>子选项2</li>
      </ul>
    </li>
    <li class="menu-item">
      <a href="#">菜单2</a>
      <ul class="sub-menu">
        <li>子选项3</li>
        <li>子选项4</li>
      </ul>
    </li>
  </ul>
</header>

对应的CSS：

.main-menu .menu-item .sub-menu {
  display: none;
}
.main-menu .menu-item:hover .sub-menu {
  display: block;
}

该方案通过DOM层级关联触发元素与目标元素，确保hover事件仅影响当前菜单对应的子菜单，不会触发其他子菜单显示。

内容的提问来源于stack exchange，提问作者GoonGamja