如何为Bootstrap多级下拉菜单添加第三级菜单？

你当前的CSS规则会让所有.dropdown-submenu下的.dropdown-menu在父元素hover时显示，导致第三级菜单和第二级一起弹出来。不用新增subsubmenu类，调整下CSS选择器并正确嵌套HTML结构就能解决问题。

一、修改CSS规则 #

把现有CSS里的触发选择器改成直接子级选择器，这样只有当前.dropdown-submenu的直接子菜单才会在hover时显示，而非所有后代菜单：

.dropdown-submenu{
    position: relative;
}
.dropdown-submenu a::after{
    transform: rotate(-90deg);
    position: absolute;
    right: 3px;
    top: 40%;
}
/* 关键修改：用 > 指定仅直接子级的下拉菜单 */
.dropdown-submenu:hover > .dropdown-menu, .dropdown-submenu:focus > .dropdown-menu{
    display: flex;
    flex-direction: column;
    position: absolute !important;
    margin-top: -30px;
    left: 100%;
}
@media (max-width: 992px) {
    .dropdown-menu{
        width: 50%;
    }
    .dropdown-menu .dropdown-submenu{
        width: auto;
    }
}

二、嵌套第三级（及更多）菜单 #

所有层级的子菜单都复用.dropdown-submenu类，按照第二级的结构继续嵌套即可，不需要新增类：

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Navbar</a>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 1</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <li><a class="dropdown-item" href="#">Action</a></li>
          <li><a class="dropdown-item" href="#">Another action</a></li>
          <!-- 第二级子菜单 -->
          <li class="dropdown-submenu">
            <a class="dropdown-item dropdown-toggle" data-toggle="dropdown" href="#">Something else here</a>
            <ul class="dropdown-menu">
              <a class="dropdown-item" href="#">A</a>
              <!-- 第三级子菜单 -->
              <li class="dropdown-submenu">
                <a class="dropdown-item dropdown-toggle" data-toggle="dropdown" href="#">B with submenu</a>
                <ul class="dropdown-menu">
                  <a class="dropdown-item" href="#">B1</a>
                  <a class="dropdown-item" href="#">B2</a>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

原理说明 #

原来的CSS用.dropdown-submenu:hover .dropdown-menu会选中所有后代的下拉菜单，hover父级时所有子菜单都会显示。改成>直接子选择器后，只有当前hover的.dropdown-submenu的直接子菜单才会弹出，更深层级的菜单只会在它自己的父级被hover时才显示，不会和上一级同时出现。

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