Bootstrap Menu с несколькими подменю повторяет первое подменю

Question

У меня есть разметка, которая отображает меню Bootstrap-4, скажем, с 4 пунктами.

Каждый пункт меню имеет вложенное подменю.(и я планирую углубиться)

Подменю первого элемента отображается правильно.(Логистика, Логистика, Логистика)

Следующие пункты не отображают соответствующее подменю, но повторяют подменю первого элемента.(Логистика, Логистика, Логистика)

Буду признателен за любые предложения ....

Я проверил свою разметку, поэтому линии выровнены и все правильно вложены.Я нашел примеры меню начальной загрузки только с 1 подменю, и это сработало (очевидно).Наличие более 1 подменю создает эту проблему.

<Done>

<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Home
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-toggle dropdown-item" href="#" id="navbarDropdownMenuLink11" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
        Applications
</a>


<ul class="dropdown-submenu" aria-labelledby="navbarDropdownMenuLink11">

<div class="dropdown-menu">
                <a class="dropdown-item" href="">Logistics</a>
                <a class="dropdown-item" href="">Logistics</a>
                <a class="dropdown-item" href="">Logistics</a>
            </div>

    </ul>




    <a class="dropdown-toggle dropdown-item" href="#" id="navbarDropdownMenuLink12" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
        Technical Support
    </a>
    <ul class="dropdown-submenu" aria-labelledby="navbarDropdownMenuLink12">

            <div class="dropdown-menu">
                <a class="dropdown-item" href="/screens/utility.htm">Downloads</a>
                <a class="dropdown-item" href="/screens/down_install.htm">Installation</a>

            </div>

    </ul>








    <a class="dropdown-toggle dropdown-item" href="#" id="navbarDropdownMenuLink13" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
        External Links
    </a>
    <ul class="dropdown-submenu" aria-labelledby="navbarDropdownMenuLink13">

            <div class="dropdown-menu">
                <a class="dropdown-toggle dropdown-item" href="#" id="navbarDropdownMenuLink14" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                    Logik Center
                </a>
                <ul class="dropdown-submenu" aria-labelledby="navbarDropdownMenuLink14">

                        <div class="dropdown-menu">
                            <a class="dropdown-item" href="javascript:window.open('http://logik.pwv.gov.za')">Log Request</a>
                            <a class="dropdown-item" href="javascript:window.open('http://10.131.15.145/vulindlela/requests_login.htm')">View Request</a>

                        </div>

                </ul>
                <a class="dropdown-item" href="javascript:window.open('http://xxxxxx')">Persal</a>
                <a class="dropdown-item" href="javascript:window.open('http://xxxxxx')">Logis</a>
                <a class="dropdown-item" href="javascript:window.open('http://xxxxxxxx/')">BAS</a>
                <a class="dropdown-item" href="javascript:window.open('http://xxxxxxx')">Government</a>
                <a class="dropdown-item" href="javascript:window.open('http://xxxxxxx')">National </a>
                <a class="dropdown-item" href="javascript:window.open('http://www.xxxxxxxx/')">Bank</a>

            </div>

    </ul>



    <a class="dropdown-item" href="/screens/vulhistory.htm">History</a>
    <a class="dropdown-item" href="/screens/contactus.htm">Contacts</a>
    <a class="dropdown-item" href="/screens/main.htm">Home</a>



</ul>

</li>

</Done>

Я ожидаю, что будет отображаться подменю каждого элемента, а не просто повторение подменю первого элемента.

Дайте мне знать, если мне нужнопредоставить больше информации.

Answer 1

Это может быть связано с тем, как вы вкладываете меню.Ниже приведен рабочий пример с двумя выпадающими списками.

Вот код:

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action2</a>
      <a class="dropdown-item" href="#">Another action2</a>
      <a class="dropdown-item" href="#">Something else here2</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link2</a>
    </div>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>