0

I am trying to implement dropdowns inside a dropdown menu in Bootstrap 4.3. I tried this code that seems to be logical but it doesn't work.

<html>
  <head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </head>
  <body>
    <button class="btn btn-success" id="dropdownMenuButton" data-toggle="dropdown">Click</button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
      <li>
        <a class="dropdown-item" href="#" role="button" id="dropdownSubmenuButton1" data-toggle="dropdown">Item 1</a>
        <div class="dropdown-menu" aria-labelledby="dropdownSubmenuButton1">
          <a class="dropdown-item" href="#">Submenu 1, Item 1</a>
          <a class="dropdown-item" href="#">Submenu 1, Item 2</a>
        </div>
      </li>
      <li>
        <a class="dropdown-item" href="#" role="button" id="dropdownSubmenuButton2" data-toggle="dropdown">Item 2</a>
        <div class="dropdown-menu" aria-labelledby="dropdownSubmenuButton2">
          <a class="dropdown-item" href="#">Submenu 2, Item 1</a>
          <a class="dropdown-item" href="#">Submenu 2, Item 2</a>
        </div>
      </li>
    </ul>
  </body>
</html>

On click at the root menu item it closes without showing any submenu. I also tried to replace ul-li with div-a way as it's shown in the documentation here: https://getbootstrap.com/docs/4.3/components/dropdowns/

<html>
  <head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </head>
  <body>
    <button class="btn btn-success" id="dropdownMenuButton" data-toggle="dropdown">Click</button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
      <a class="dropdown-item" href="#" role="button" id="dropdownSubmenuButton1" data-toggle="dropdown">Item 1</a>
      <div class="dropdown-menu" aria-labelledby="dropdownSubmenuButton1">
        <a class="dropdown-item" href="#">Submenu 1, Item 1</a>
        <a class="dropdown-item" href="#">Submenu 1, Item 2</a>
      </div>
      <a class="dropdown-item" href="#" role="button" id="dropdownSubmenuButton2" data-toggle="dropdown">Item 2</a>
      <div class="dropdown-menu" aria-labelledby="dropdownSubmenuButton2">
        <a class="dropdown-item" href="#">Submenu 2, Item 1</a>
        <a class="dropdown-item" href="#">Submenu 2, Item 2</a>
      </div>
    </div>
  </body>
</html>

It doesn't work also. But in this case on click at the second link (Item 2) the first submenu opens (Submenu 1) instead of the bound Submenu 2.

Fomalhaut
  • 8,590
  • 8
  • 51
  • 95
  • Does this answer your question? [Bootstrap 4: Multilevel Dropdown Inside Navigation](https://stackoverflow.com/questions/44467377/bootstrap-4-multilevel-dropdown-inside-navigation) – mayersdesign Mar 01 '20 at 14:53
  • Not really. They consider ONE embedded dropdown and navigation menu instead of the plain one. My case is different. – Fomalhaut Mar 01 '20 at 14:59
  • Bootstrap 4 doesn't support multi-level / nested dropdowns. Here's a link to get you started - you have to put the css and js together for this yourself. [link](https://bootstrapstudio.io/tutorials/multilevel-dropdowns) – Lasse Holm Mar 01 '20 at 15:08

0 Answers0