Блог

Я пытаюсь добавить многоуровневое выпадающее меню в заголовок моего сайта начальной загрузки, я добавил этот код, ребята, можете ли вы сказать мне, где я ошибся, поскольку это не работает, он всегда открывает первый вариант, не имеет значения, где я нажимаю. У меня есть пять выпадающих списков внутри выпадающего списка.

Пожалуйста, взгляните на это и скажите мне, что я сделал не так?

 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
  aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
  <img src="/assets/dots.png" style="height:30px; width:30px;">
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNavDropdown">
  <ul class="navbar-nav">
    <li class="nav-item dropdown">
      <a class="nav-link" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
        aria-expanded="false">
        Beauty
        <img src="http://pluspng.com/img-png/free-png-plus-sign-plus-sign-icon-button-green-approved-check-712.png"
          style="width:10px; height:10px;">
      </a>
      <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
        <a class="nav-link" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Makeup
          <img src="http://pluspng.com/img-png/free-png-plus-sign-plus-sign-icon-button-green-approved-check-712.png"
            style="width:10px; height:10px;">
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">

          <a class="dropdown-item" href="#">Lips</a>
          <a class="dropdown-item" href="#">Face</a>
          <a class="dropdown-item" href="#">Nails</a>
          <a class="dropdown-item" href="#">Kits</a>
          <a class="dropdown-item" href="#">Tools</a>
        </div>
        <a class="nav-link" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
          aria-expanded="false">
          Skin
          <img src="http://pluspng.com/img-png/free-png-plus-sign-plus-sign-icon-button-green-approved-check-712.png"
            style="width:10px; height:10px;">
        </a>


        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">

          <a class="dropdown-item" href="#">Facewash</a>
          <a class="dropdown-item" href="#">Toner</a>
          <a class="dropdown-item" href="#">Cleaner</a>
          <a class="dropdown-item" href="#">Sunscream</a>
          <a class="dropdown-item" href="#">Bleach</a>
          <a class="dropdown-item" href="#">Body Oil</a>
          <a class="dropdown-item" href="#">Scrubs</a>
          <a class="dropdown-item" href="#">HandWash</a>
          <a class="dropdown-item" href="#">Hair Remover</a>
        </div>
        <a class="nav-link" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
          aria-expanded="false">
          Hair
          <img src="http://pluspng.com/img-png/free-png-plus-sign-plus-sign-icon-button-green-approved-check-712.png"
            style="width:10px; height:10px;">
        </a>


        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">

          <a class="dropdown-item" href="#">Shampoo</a>
          <a class="dropdown-item" href="#">Conditioner</a>
          <a class="dropdown-item" href="#">Serum</a>
          <a class="dropdown-item" href="#">Gels</a>
          <a class="dropdown-item" href="#">Sprey</a>
          <a class="dropdown-item" href="#">Colour</a>
          <a class="dropdown-item" href="#">Brushes</a>
          <a class="dropdown-item" href="#">Dryer</a>
          <a class="dropdown-item" href="#">Straightner Roller</a>
        </div>

        <a class="nav-link" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
          aria-expanded="false">
          Shaving
          <img src="http://pluspng.com/img-png/free-png-plus-sign-plus-sign-icon-button-green-approved-check-712.png"
            style="width:10px; height:10px;">
        </a>


        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">

          <a class="dropdown-item" href="#">Razors</a>
          <a class="dropdown-item" href="#">Shavers</a>
          <a class="dropdown-item" href="#">Cream</a>
          <a class="dropdown-item" href="#">Brushes</a>
          <a class="dropdown-item" href="#">Pre amp; Post</a>
          <a class="dropdown-item" href="#">Moustach Care</a>
          <a class="dropdown-item" href="#">Men's Creame</a>
        </div>

        <a class="nav-link" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
          aria-expanded="false">
          Fragnence
          <img src="http://pluspng.com/img-png/free-png-plus-sign-plus-sign-icon-button-green-approved-check-712.png"
            style="width:10px; height:10px;">
        </a>


        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">

          <a class="dropdown-item" href="#">Deodrents</a>
          <a class="dropdown-item" href="#">Body Mist</a>
          <a class="dropdown-item" href="#">Perfume</a>
        </div>

      </div>
    </li>
  </ul>
</div>
 

Многоуровневое выпадающее меню Bootstrap — это переключаемое меню, которое позволяет пользователю выбрать одно значение из предопределенного списка: