嵌套<ul>元素:hover伪类失效，如何实现下拉菜单？

问题根源 #

你的HTML结构有误——下拉菜单的<ul>应该嵌套在对应的父<li>内部，而不是作为兄弟元素放在外面。当前结构下，nav li:hover ul选择器找不到目标ul，因为ul是li的同级元素，不是后代元素；而nav ul:hover ul会触发所有下拉，是因为只要鼠标悬停在最外层ul的任何区域，都会选中所有后代ul。

修正步骤 #

1. 修复HTML结构 #

把每个下拉<ul>移到对应的父<li>标签内部，确保层级关系正确：

<nav>
    <ul>
      <li><a href="index.html">Home</a></li>
      <li>
        <a href="#">Link 2</a>
        <ul>
          <li><a href="#">Drop 1</a></li>
          <li><a href="#">Drop 2</a></li>
          <li><a href="#">Drop 3</a></li>
          <li><a href="#">Drop 4</a></li>
        </ul>
      </li>
      <li>
        <a href="#">Link 3</a>
        <ul>
          <li><a href="#">Link 3 Drop</a></li>
        </ul>
      </li>
      <li>
        <a href="#">Link 4</a>
        <ul>
          <li><a href="#">Link 4 Drop</a></li>
        </ul>
      </li>
      <li><a href="#">Link 5</a></li>
    </ul>
  </nav>

2. 调整CSS优化布局 #

你的nav li:hover ul { display: block; }是正确的选择器，修复HTML后就能正常工作。另外给父li添加相对定位，让下拉菜单相对于父元素定位，避免布局混乱：

nav li {
  border-bottom: 1px solid #002171;
  position: relative; /* 添加相对定位 */
}

nav ul ul {
  position: absolute;
  display: none;
  padding: 0;
  top: 100%; /* 下拉菜单紧贴父li底部 */
  left: 0;
}

效果说明 #

修复后，只有鼠标悬停在包含下拉菜单的父<li>上时，对应的下拉<ul>才会显示，不会出现全局触发的问题。

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