Hello there,
I'm having trouble with mobile navigation. I have a main navigation menu with some hidden subnavigation items. When I click on a parent item, it opens the corresponding subnav, but it covers up all other parent items that come after it.
Is there a way for the child item to "squeeze in" between the parent items by pushing them downward?
$(".main-nav").find("li").click(function() {
$(this).find(".subnav").toggle();
});.main-nav {
border: 1px solid red;
position: relative;
}
.main-nav li {
display: inline-block;
width: 100%;
}
.subnav {
border: 1px dashed blue;
position: absolute;
display: none;
background-color: grey;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="main-nav">
<li>Nav 1</li>
<li>Nav 2</li>
<li> Nav 3
<ul class="subnav">
<li>Subnav 1</li>
<li>Subnav 2</li>
</ul>
</li>
<li>Nav 4
<ul class="subnav">
<li>Subnav 1</li>
<li>Subnav 2</li>
<li>Subnav 3</li>
</ul>
</li>
<li>Nav 5</li>
</ul>Thank you for your help!