Hey there! I've been working on creating a drop-down menu using jQuery and I've encountered an issue. When I click on a navigation element, the other elements seem to drop about 20px. Any idea what might be causing this? Your help would be greatly appreciated. Thanks in advance!
Below is my code snippet or you can check out the jsFiddle for reference:
js/js.js
$('.nav_parent h5').click(function () {
$(this).next('.nav_child').slideToggle();
$(this).parent().siblings().children().next().slideUp();
return false;
});
index.html
<div class="container">
<ul id="header_nav">
<li class="nav_parent">
<h5>Reports</h5>
<ul class="nav_child">
<li><a href="#" class="mnavlink">Download CSV</a>
</li>
</ul>
</li>
<li class="nav_parent">
<h5>Build</h5>
<ul class="nav_child">
<li><a href="#" class="mnavlink">Build new site</a>
</li>
</ul>
</li>
<li class="nav_parent">
<h5>Subscriptions</h5>
<ul class="nav_child">
<li><a href="#" class="mnavlink">E-Briefings</a>
</li>
</ul>
</li>
<li class="nav_parent">
<h5>Media Store</h5>
<ul class="nav_child">
<li><a href="#" class="mnavlink">Image Store</a>
</li>
</ul>
</li>
</ul>
</div>
css/style.css
.nav_parent {
display:inline-block;
width:24%;
background:#FCCC5F;
}
.nav_parent h5:hover {
background:#FCE49D;
}
.nav_child {
display:none;
}
.nav_child li {
line-height:30px;
}
.nav_child li:hover {
background:#FCE49D;
}