Submenu dropdown layout in Bootstrap

As per my understanding, you are looking for nested submenu. If, yes below is the solution for same.

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu:hover>.dropdown-menu {
  top: 0;
  left: -10rem;
  /* 10rem is the min-width of dropdown-menu */
  margin-top: -6px;
  display:block
}
.dropdown:hover>.dropdown-menu{
display:block
}

/* rotate caret on hover */

.dropdown-menu>li>a:hover:after {
  text-decoration: underline;
  transform: rotate(-90deg);
}
<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

</head>

<body>
  <nav class="navbar navbar-expand-md navbar-light bg-light">
    <a class="navbar-brand pb-2" href="#">Navbar</a>
    <button class="navbar-toggler" 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>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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
        </a>
          <ul class="dropdown-menu dropdown-menu-right" 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" href="#">Submenu wider text</a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Submenu</a></li>
                <li><a class="dropdown-item" href="#">Submenu0</a></li>
                <li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" href="#">Submenu 1</a>
                  <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#">Subsubmenu1</a></li>
                    <li><a class="dropdown-item" href="#">Subsubmenu1</a></li>
                  </ul>
                </li>
                <li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" href="#">Submenu 2</a>
                  <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#">Subsubmenu2</a></li>
                    <li><a class="dropdown-item" href="#">Subsubmenu2</a></li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </nav>
</body>

</html>
Source Skelly Codeply

I have put this together with Bootstrap 4 and some custom CSS:

.navbar-nav a {
  color: #fff !important;
}
.navbar-nav a:hover {
  color: #ddd !important;
}
.navbar-nav .submenu.level-2 {
  padding-left: 1.5rem;
}
.navbar-nav .dropdown-toggle::after {
  display: none;
}

@media (min-width: 768px) {
  .navbar-nav .dropdown .submenu {
    position: absolute;
    top: 100%;
    display: none;
  }
  .navbar-nav .dropdown .submenu li {
    display: block;
  }
  .navbar-nav .dropdown .submenu li a {
    display: block;
    white-space: nowrap;
    text-decoration: none;
  }
  .navbar-nav .dropdown .submenu.level-1 {
    right: 0;
    left: auto;
  }
  .navbar-nav .dropdown .submenu.level-2 {
    padding-left: 0;
    top: 0;
    right: 100%;
    left: auto;
  }
  .navbar-nav .dropdown:hover .submenu.level-1 {
    display: block;
  }
  .navbar-nav .dropdown:hover .submenu.level-1 li {
    position: relative;
  }
  .navbar-nav .dropdown:hover .submenu.level-1 li:hover .submenu.level-2 {
    display: block;
  }
  .navbar-nav .dropdown-toggle::after {
    display: inline-block;
  }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  
  <nav class="navbar navbar-expand-md bg-dark navbar-dark">
  <a class="navbar-brand" href="#">Logo</a>

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Career</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#">Info</a>
        <ul class="list-unstyled bg-dark text-light submenu level-1">
          <li><a class="nav-link" href="#">About</a>
            <ul class="list-unstyled bg-dark text-light submenu level-2">
              <li><a class="nav-link" href="#">Mission</a></li>
              <li><a class="nav-link" href="#">Vision</a></li>
            </ul>
          </li>
          <li><a class="nav-link" href="#">Clients</a></li>
          <li><a class="nav-link" href="#">Contact Us</a></li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

Here is a jsFiddle with SCSS instead of plain CSS.

I don't know how close it is to the result you are looking for, but I hope it helps.

Tags:

Javascript

Html

Css

Php

Bootstrap 4

Recent Posts