HTML/CSS多级下拉菜单hover显示异常问题求助

我明白你遇到的多级菜单显示问题了——现在只要悬停「Menu」选项，就连「Item A」的子菜单「Item1」「Item2」也一起冒出来了，完全不符合你想要的“只有悬停对应父项才展开子菜单”的效果。咱们来一步步搞定这个问题：

问题原因分析 #

你当前的CSS里，nav ul li:hover ul这个选择器太宽泛了：它会选中所有被hover的<li>元素下面的<ul>，不管这个<ul>是直接子元素还是嵌套的孙元素。所以当你悬停最外层的「Menu」<li>时，它下面所有层级的<ul>都会被触发显示规则，自然就把第三级菜单也带出来了。另外你的CSS里还有重复的nav ul li ul定义，这也会导致样式冲突，得先清理掉。

修正后的完整代码 #

CSS代码 #

nav li { 
  float: left; 
  list-style: none; 
  margin: 0; 
  padding: 0; 
  position: relative; 
  z-index: 10000; 
}

nav ul {
  margin: 0;
  padding: 0;
}

nav ul ul { 
  display: none; /* 默认隐藏所有子菜单 */
  position: absolute; 
  top: 100%; /* 第一级子菜单在父项下方 */
  left: 0;
  margin: 0; 
  padding: 0; 
  z-index: 10000;
  background-color: white; 
  border: 1px solid black; 
  width: 15em;
}

/* 第三级子菜单：定位在父项右侧，避免重叠 */
nav ul ul ul {
  top: 0;
  left: 100%;
}

/* 只有hover的li的直接子ul才显示 */
nav ul li:hover > ul { 
  display: block; 
}

nav a, nav span { 
  background-color: red; 
  color: black; 
  display: block; 
  margin: 0.2em 0 0 0; 
  padding: 0.2em 0.1em; 
  text-decoration: none; 
  width: 13.6em; 
  transition: all 0.5s ease-in; 
  z-index: 10000; 
}

nav ul li { 
  margin: 0.2em 0 0 0.2em; 
}

nav ul li ul li { 
  background-color: white; 
  width: 14.4em; 
  padding: 0; 
}

nav a:focus, nav a:hover, nav span { 
  color: white; 
  background-color: black; 
  width: 13.4em; 
}

HTML代码 #

<nav>
  <ul>
    <li><a href="#">Menu</a>
      <ul>
        <li>
          <a href="#" target="ABC">Item A</a>
          <ul>
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 2</a></li>
          </ul>
        </li>
        <li>
          <a href="#" target="#">Item B</a>
        </li>
      </ul>
    </li>
    <li><a href="#">Seasons</a>
      <ul>
        <li>
          <a href="#" target="ABC">Season1 </a>
        </li>
        <li>
          <a href="#" target="ABC">Season 2</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

关键修改说明 #

1. 精准的hover触发规则：用nav ul li:hover > ul替代原来的nav ul li:hover ul，>是子选择器，只会选中当前hover的<li>的直接子元素<ul>，不会影响嵌套的孙级<ul>。这样只有悬停「Menu」时显示第一级子菜单（Item A、Item B），悬停「Item A」时才会显示它右侧的第二级子菜单（Item1、Item2）。
2. 第三级菜单定位：给nav ul ul ul设置top: 0; left: 100%;，让它紧贴父项的右侧显示，彻底避免和父菜单重叠。
3. 默认隐藏子菜单：用display: none;替代原来的font: 0/0 serif;，更直观且兼容性更好。
4. 清理冗余代码：去掉了重复的nav ul li ul定义，避免样式冲突。

现在你可以测试一下：悬停「Menu」只会展开Item A和Item B，悬停Item A时，它的右侧会弹出Item1和Item2，完全符合你的预期效果~

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