<div class="mobile-nav">
<ul class="menu">
<li class="dropdown">
<a href="#">Menu +</a>
<ul class="dropdown-menu">
<li><a href="http://google.com">google</a></li>
<li><a href="#">submenu</a></li>
<li><a href="#">submenu</a></li>
<li><a href="#">submenu</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#">Menu +</a>
<ul class="dropdown-menu">
<li><a href="#">submenu</a></li>
<li><a href="#">submenu</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#">Menu +</a>
<ul class="dropdown-menu">
<li><a href="#">submenu</a></li>
<li><a href="#">submenu</a></li>
</ul>
</li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
</ul>
</div>
.dropdown .dropdown-menu {
display: none;
}
.dropdown.open>.dropdown-menu {
display: block;
}
$('.mobile-nav').on('click', '.dropdown > a', function (e) {
//$(this).toggleClass('open').siblings(".dropdown").removeClass('open');
$(this).closest('.dropdown').toggleClass('open').siblings(".dropdown").removeClass('open');
});
This Pen doesn't use any external CSS resources.