bootstrap 5 submenu in navbar

Question

I can't use submenu in bootstrap 5. My objective is:

Prodotti

Brevetti
I Prodotti ---> Submenu -Item1 -Item2 -Item3

but I cant understand how it is.

Screen example

<div class="dropdown-menu" aria-labelledby="dropdown-items"> 
<a class="dropdown-item" href="/i-brevetti-fitline">Brevetti</a> 
<a class="dropdown-item" href="/prodotti-fitline">I Prodotti</a>
</div>

Does this answer your question? [Bootstrap dropdown sub menu missing](https://stackoverflow.com/questions/18023493/bootstrap-dropdown-sub-menu-missing) — isherwood, Mar 11 '22 at 22:27

score 2 · Answer 1 · edited Mar 11 '22 at 22:24

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

  <style type="text/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;
    }
  </style>
</head>

<body>
  <h1>Hello, world!</h1>
  <div class="dropdown">
    <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
          Prodotti
          </a>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
      <li><a class="dropdown-item" href="#">Brevetti</a></li>
      <li>
        <a class="dropdown-item" href="#">I Prodotti</a>
        <ul class="dropdown-menu dropdown-submenu">
          <li>
            <a class="dropdown-item" href="#">Submenu item 1</a>
          </li>
          <li>
            <a class="dropdown-item" href="#">Submenu item 2</a>
          </li>
          // for another submenu
          <li>
            <a class="dropdown-item" href="#">Submenu Submenu</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>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>

Some explanation of this answer would make it better. – isherwood Mar 11 '22 at 22:25 — isherwood, Mar 11 '22 at 22:25

bootstrap 5 submenu in navbar

1 Answers1