Вертикальное выпадающее меню не отображается должным образом

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

Codepen: https://codepen.io/KGuide/pen/jOEpzQo в приведенном ниже коде Элементы подменю « Media должны отображаться в разделе «Медиа», а не в нижней части. Как это исправить, как показано на рисунке

    <div class="menu-w">
  <a href="">Menu One</a>
   <a href="">Menu Two</a>
  <a href="">Menu Three</a>
  <a href="">Menu Four</a>
</div>

<div class="menu-w">
  <a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">More Menu</a>
  <ul class="collapse list-unstyled" id="homeSubmenu">
    <li>
      <a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Media</a>
      <ul class="collapse list-unstyled" id="pageSubmenu">
        <li>
          <a href="#">News</a>
        </li>
        <li>
          <a href="#">Video Gallery</a>
        </li>
        <li>
          <a href="#">Blog</a>
        </li>
      </ul>
    </li>
    <li><a href="#">Directory</a> </li>
    <li><a href="#">Contact</a> </li>

  </ul>
</div>

Всего 1 ответ


просто удалите .list-unstyled из #pageSubmenu ul