У меня есть горизонтальное и вертикальное меню в разделе заголовка, и вертикальное меню должно отображать подменю как выпадающее меню при событии щелчка. Горизонтальное меню также имеет подменю, которые не показаны в этом примере, так как я застрял с вертикальным меню More Menu как 
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>