Bootstrap 5中如何为下拉菜单项添加嵌套子菜单

现有导航栏效果预览

Bootstrap 5 原生组件已支持多级嵌套下拉，无需引入第三方插件或编写复杂自定义JS。你当前的代码是WordPress输出的默认菜单结构，类名和触发属性不符合Bootstrap 5规范，按以下规则调整即可生效：

• 给承载二级下拉的Web Development列表项添加dropdown dropend类：dropend控制二级菜单向右展开，如需向左展开替换为dropstart即可
• 给Web Development对应的a标签添加dropdown-item dropdown-toggle类，补全下拉触发必备属性：role="button"、data-bs-toggle="dropdown"、aria-expanded="false"
• 将二级菜单容器原有的sub-menu类替换为Bootstrap原生的dropdown-menu类，二级菜单内所有链接都加上dropdown-item类，保证样式与一级菜单统一

调整后的完整可运行代码如下：

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
    Services
  </a>
  <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
    <!-- Web Development 二级下拉 -->
    <li id="menu-item-1644" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-1644 dropdown dropend">
      <a href="http://localhost:8888/wordpress-experiments/level-1/level-2/" class="dropdown-item dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-expanded="false">
        Web Development
      </a>
      <ul class="dropdown-menu">
        <li id="menu-item-1645" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1645">
          <a href="http://localhost:8888/wordpress-experiments/level-1/level-2/level-3/" class="dropdown-item">Level 3</a>
        </li>
        <li id="menu-item-1699" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1699">
          <a href="http://localhost:8888/wordpress-experiments/level-1/level-2/level-3a/" class="dropdown-item">Level 3a</a>
        </li>
        <li id="menu-item-1700" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1700">
          <a href="http://localhost:8888/wordpress-experiments/level-1/level-2/level-3b/" class="dropdown-item">Level 3b</a>
        </li>
      </ul>
    </li>

    <li><a class="dropdown-item" href="#">Software Development</a></li>
    <li><a class="dropdown-item" href="#">Networking and Cloud</a></li>
    <li><a class="dropdown-item" href="#">Cyber Defence and offensive</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">More</a></li>
  </ul>
</li>

如果出现二级菜单位置偏移、被父容器遮挡的问题，可添加一小段CSS修正定位：

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

默认配置为点击触发下拉，如需实现鼠标悬浮自动展开，额外添加几行监听鼠标移入移出事件的JS即可，不需要修改核心组件逻辑。

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