After experimenting with creating a slideDown submenu for my navigation bar, I finally achieved the desired effect. However, when I integrated the final code into my main code (originally tested and created with only one tab on codepen), the submenu slid down over the main li underneath the one clicked to reveal the submenu. Additionally, I noticed that clicking on a different li in the main nav did not hide the menu.
Here is the link to my complete side navbar on CodePen: http://codepen.io/PorototypeX/pen/swvtc
Some users asked me to post the code here as well, so please excuse the length if it's not to your liking.
HTML:
<div class="backing">
<ul class="navbar" id="topnav">
<li class="active">
<a>HOME</a>
<!-- Below this is the code for the submenu. For now I just put in example names for testing. Eventually, I will have a submenu for each li after getting this working on the first li -->
<ul class="menu-home">
<li><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>About</span></a></li>
<li><a href="#"><span>Info</span></a></li>
</ul>
</li>
<!-- Rest of the list items omitted for brevity -->
</ul>
<!-- --------------------------------------------------------------------------------------- -->
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
CSS:
/* Your CSS styles go here */JQuery:
// Jquery script goes here