I currently have a vertical and horizontal menu in the header section. The vertical menu needs to display submenus as dropdowns on click event, but I am facing an issue with the More Menu under the vertical menu. You can see the problem in this image: https://i.sstatic.net/aarAI.png
You can view the Codepen example here: https://codepen.io/KGuide/pen/jOEpzQo. In the code provided, the submenu items for Media should be displayed under Media, but they are showing at the bottom. How can I fix this layout issue based on the image shown?
<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>