this is my code which i have created this navigation bar with bootstrap and all of its drop downs but i want to add another drop down to the services drop down section inside of webdevelopment but it can't any easy solution for this to done with 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>

this is my code which i have created this navigation bar with bootstrap and all of its drop downs but i want to add another drop down to the services drop down section inside of webdevelopment but it can't any easy solution for this to done with 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>

• javascript
• html
• jquery
• css
• bootstrap-5

3 Answers 3

I assume you want the "more" link to have a submenu. Just put in another menu in to the list item:

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

Style it however you like, and use CSS to make it invisible and absolute:

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

And when the link is hovered make it visible:

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

so this is the answer i found but note that this is only available with 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>

CSS:

.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;
}

You can still use bootstrap to position the submenu rather than overriding the positioning styles. Just use data-bs-toggle="dropdown" on the link triggering the submenu like usual. You have to add a bit of JS to call stopPropagation() on the click handler for the link triggering the submenu to stop the menus from immediately disppearing when clicked. Use "dropend" on the parent to position the submenu to the right of the link. Also use data-bs-display="static" to disable dynamic popper.js positioning. This is because the submenu is positioned absolutely relative to the main menu and popper.js will calculate that there is not enough space for the submenu within this parent, which will cause it to reposition the submenu incorrectly.

HTML snippet

<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();
    });
  }
})