网页嵌套Dropdown列表无法显示，求多级导航菜单实现方案

你的代码存在结构错误，导致二级子菜单无法正常展示，以下是问题点和修正后的实现：

现有代码问题 #

• 二级<ul>直接嵌套在一级下拉<ul>中，不符合下拉菜单的层级结构规范，应该将二级菜单包裹在<li>内
• 缺少标识二级下拉的类名（如dropdown-submenu），无法触发子菜单展开逻辑
• 部分<li>标签未正确闭合，结构混乱

修正后的完整代码 #

<ul id="menu-top" class="nav navbar-nav navbar-right">
  <li><a href="dashboard.php" class="menu-top-active">DASHBOARD</a></li>

  <!-- 主菜单：Categories -->
  <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
      Categories <i class="fa fa-angle-down"></i>
    </a>
    <ul class="dropdown-menu" role="menu">
      <!-- 二级子菜单：North -->
      <li class="dropdown-submenu">
        <a tabindex="-1" href="#">North</a>
        <ul class="dropdown-menu">
          <li><a tabindex="-1" href="add-category.php">Add Category</a></li>
          <li><a tabindex="-1" href="manage-categories.php">Manage Categories</a></li>
        </ul>
      </li>
      <!-- 二级子菜单：South -->
      <li class="dropdown-submenu">
        <a tabindex="-1" href="#">South</a>
        <ul class="dropdown-menu">
          <li><a tabindex="-1" href="add-language1.php">Add Language</a></li>
          <li><a tabindex="-1" href="manage-language1.php">Manage Language</a></li>
          <li><a tabindex="-1" href="manage-language1.php">Add Population</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

必要的CSS补充（适配Bootstrap） #

如果使用Bootstrap，默认不支持多级下拉，需要添加以下样式让子菜单正确显示：

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -6px;
  margin-left: -1px;
  border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover .dropdown-menu {
  display: block;
}

说明 #

1. 用dropdown类标识主下拉菜单的<li>，dropdown-submenu标识包含二级菜单的<li>
2. 二级菜单的<ul>放在对应的dropdown-submenu的<li>内部，通过CSS控制hover时展开
3. 修正了标签闭合问题，保证HTML结构合法

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