how to add a sub menu to a drop down menu item in bootstrap 5?-CodePudding

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 >
          <a  href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Services
          </a>
          <ul  aria-labelledby="navbarDropdown">

            <!-- webDevelopment DropDown -->

            <li id="menu-item-1644" ><a href="http://localhost:8888/wordpress-experiments/level-1/level-2/">Web Development</a>
              <ul >
                <li id="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" ><a href="http://localhost:8888/wordpress-experiments/level-1/level-2/level-3a/">Level 3a</a></li>
                <li id="menu-item-1700" ><a href="http://localhost:8888/wordpress-experiments/level-1/level-2/level-3b/">Level 3b</a></li>
              </ul>
            </li>
           

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

CodePudding user response：

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

<li>
<div >
<a >Partners <i ></i></a>
<div >
  <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;
}

CodePudding user response：

so this is the answer i found but note that this is only available with bootstrap 5.

        <li >
          <a  href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Services
          </a>
          <ul  aria-labelledby="navbarDropdown">

            <!-- webDevelopment DropDown -->

            <li>
              <a  href="#">Web Development</a>
              <ul >
                <li>
                  <a  href="#">Submenu Submenu item 1</a>
                </li>
                <li>
                  <a  href="#">Submenu Submenu item 2</a>
                  
                </ul>
                </li>
            

            <li><a  href="#">Software Development</a></li>
            <li><a  href="#">Networking and Cloud</a></li>
            <li><a  href="#">Cyber Defence and offensive</a></li>
            <li><hr ></li>
            <li><a  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;
}