如何在Bootstrap 5中的下拉菜单项中添加子菜单？

Question

这是我使用Bootstrap及其所有下拉台创建此导航栏的代码，但我想要要添加另一个下拉列表，将网络开发内部的服务下拉部分添加到下拉部分，但对于Bootstrap5进行操作并不简单的解决方案...

        <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">

            <!-- webDevelopment DropDown -->

            <li id="menu-item-1644" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-1644"><a href="http://localhost:8888/wordpress-experiments/level-1/level-2/">Web Development</a>
              <ul class="sub-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/">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/">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/">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>

Answer 1

我认为您希望“更多”链接具有子菜单。只需将另一个菜单放入列表项目中：

<li>
<div class="submenu">
<a class="subnavbtn">Partners <i class="fa fa-caret-down"></i></a>
<div class="submenu-content">
  <a href="#link1">Link 1</a>
  <a href="#link2">Link 2</a>
  <a href="#link3">Link 3</a>
  <a href="#link4">Link 4</a>
</div>
</li>

按照您喜欢的样式，
并使用CSS使其无形且绝对：

.submenu-content {
  display: none;
  z-index: 1;
  position: absolute;
}

悬停在链接时可见：

.subnav:hover .subnav-content {
  display: inline;
}

Answer 2

因此，这是我发现的答案，但请注意，仅带Bootstrap 5

        <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">

            <!-- webDevelopment DropDown -->

            <li>
              <a class="dropdown-item" href="#">Web Development</a>
              <ul class="dropdown-menu dropdown-submenu">
                <li>
                  <a class="dropdown-item" href="#">Submenu Submenu item 1</a>
                </li>
                <li>
                  <a class="dropdown-item" href="#">Submenu Submenu item 2</a>
                  
                </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>

。

.dropdown-menu li {
  position: relative;
} 

.dropdown-menu .dropdown-submenu {
  display: none;
  position: absolute;
  left: 100%;
  top: -7px;
}

.dropdown-menu .dropdown-submenu-left {
  right: 100%;
  left: auto;
}

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

Answer 3

您仍然可以使用bootstrap来定位子菜单，而不是覆盖定位样式。只需在链接上使用data-bs-toggle =“下拉”，就像往常一样触发子菜单。您必须在单击处理程序上添加一些JS来调用stopPropagation（），以便链接触发子菜单以阻止菜单在单击时立即消失。
在父上使用“ Dropend”将子菜单放置在链接的右侧。
还要使用data-bs-display =“ static”来禁用动态popper.js定位。这是因为子菜单与主菜单绝对放置，并且popper.js将计算出该父母内部的子菜单没有足够的空间，这会导致其不正确地重新定位子菜单。

HTML摘要

<li class="dropend" id="menu-item-1644">
  <a href="#" data-bs-display="static" data-bs-toggle="dropdown" aria-expanded="false">Web Development</a>
  <ul class="dropdown-menu sub-menu">
    <li id="menu-item-1645"><a href="#">Level 3</a></li>
    <li id="menu-item-1699"><a href="#">Level 3a</a></li>
    <li id="menu-item-1700"><a href="#">Level 3b</a></li>
  </ul>
</li>

JS

document.querySelectorAll('.dropdown-menu a').forEach(function(element) { 
  let nextEl = element.nextElementSibling;
  if(nextEl && nextEl.classList.contains('sub-menu')) { 
    element.addEventListener('click', function (e) {
      // prevent opening link if link needs to open dropdown
      e.preventDefault();
      e.stopPropagation();
    });
  }
})