基于HTML和CSS的三层嵌套下拉菜单hover效果故障排查

问题分析 #

你的第三层子菜单hover失效，核心原因是CSS选择器层级匹配错误，同时固定层级的写法不够灵活，容易出错。另外当前CSS中嵌套菜单的定位逻辑可以优化，避免菜单错位或提前显示的问题。

修正后的完整代码 #

CSS代码

/* 基础导航样式 */
.navtop > ul {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  background: #333;
}

.navtop > ul > li {
  float: left;
  border-left: 1px solid #fff;
  position: relative; /* 第一层li设为相对定位，二级菜单基于它定位 */
}

.navtop ul li a {
  display: block;
  padding: 10px 20px;
  color: #ccc;
  text-decoration: none;
}

.navtop ul li:first-child {
  border: none;
}

/* 通用hover触发规则：所有包含子菜单的li hover时，显示直接子ul */
.navtop ul li:hover > ul {
  display: block;
}

/* 所有子菜单的基础样式 */
.navtop ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  background: #333;
  min-width: 200px;
}

/* 从第二层子菜单开始，向右偏移 */
.navtop ul ul ul {
  top: 0;
  left: 100%;
}

/* 清除浮动 */
.clear {
  clear: both;
}

HTML代码（结构无需修改）

<div class="wrap">
  <nav class="navtop">
    <ul>
      <li><a href="#"><b class="caret"></b>Dropdwown Menus</a>
        <ul class="container">
          <li><a href="#">Dropdown Menu 1</a>
            <ul>
              <li><a href="#">Dropdown Submenu 1</a>
                <ul>
                  <li><a href="#">Dropdown Sub menu</a></li>
                </ul>
              </li>
              <li><a href="#">Dropdown Submenu 2</a></li>
              <li><a href="#">Dropdown Submenu 3</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
    <div class="clear"></div>
  </nav>
</div>

关键修改点 #

• 通用hover选择器：用.navtop ul li:hover > ul替代固定层级的选择器，不管多少层嵌套，只要li包含直接子ul，hover时都会显示，避免层级写错导致的失效。
• 统一子菜单定位：二级菜单默认top:100%; left:0;，基于父li底部对齐显示；三级及以上菜单top:0; left:100%;，基于父li右侧对齐显示。
• 完善基础样式：给ul添加list-style: none; margin:0; padding:0;消除默认列表样式，避免菜单错位；给a标签添加text-decoration:none;优化视觉效果。
• 第一层li设为相对定位：确保二级菜单的绝对定位基于第一层li，不会出现偏移问题。

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