html - 垂直下拉菜单显示不正确

Question

我在标题部分有水平和垂直菜单，垂直菜单需要在单击事件时将子菜单显示为下拉菜单，水平菜单也有子菜单，但由于我坚持使用垂直菜单 更多菜单为

代码笔:https://codepen.io/KGuide/pen/jOEpzQo在下面的代码中，Media 子菜单项应该显示在 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>

Answer 1

只需从#pageSubmenu ul 中删除 .list-unstyled