HTML&CSS开发下拉菜单hover功能失效问题求助

问题原因 #

下拉菜单无法触发的核心问题是HTML嵌套结构错误：你把下拉菜单的<ul>直接作为顶部导航<ul>的子元素，没有嵌套到「Categories」对应的<li>标签内部，而你的CSS选择器nav ul li:hover>ul要求的是选中li的直接子级ul才会在hover时显示，结构不匹配自然无法触发。

修复后的HTML代码 #

<div>
  <nav>
    <label class="logo">LOGO</label>
    <ul>
      <li><a href="#">Home</a></li>
      <li>
        <a href="#">Categories</a>
        <!-- 下拉ul需放到Categories对应的li内部，作为它的直接子元素 -->
        <ul>
          <li><a>Category</a></li>
          <li><a>Category</a></li>
          <li><a>Category</a></li>
          <li><a>Category</a></li>
          <li><a>Category</a></li>
          <li><a>Category</a></li>
          <li><a>Category</a></li>
          <li><a>Category</a></li>
        </ul>
      </li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</div>

可选CSS优化（避免下拉菜单错位、样式异常） #

你可以在现有CSS基础上补充以下规则，优化显示效果：

/* 给包含下拉菜单的li加相对定位，让下拉菜单相对于父菜单项定位 */
nav ul li {
  position: relative;
}
/* 下拉菜单项改成块级，防止横向排列 */
nav ul ul li {
  display: block;
  width: 120px;
  margin: 0;
}

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