CODEWITHSUNDEEP
twitter-bootstrapbootstrap-5
Mariano
Mariano

Reputation: 455

bootstrap 5 submenu in navbar

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

Prodotti

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>

Upvotes: 0

Views: 6562

Answers (1)

atomankion
atomankion

Reputation: 209

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>

Upvotes: 1

Related Questions