I am facing an issue with the code below. Whenever I hover over a menu, all submenus in the dropdown open. How can I make it so that only the specific submenu toggles its active class when clicked:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("ul li").hover(function() {
// remove classes from all
$("nav li:first").toggleClass("active");
});
});
</script>
<style type="text/css">
.container nav li {display: none;}
.container nav li.active {display:block;}
</style>
<div class="container">
<ul>
<li>
<span>1</span>
<nav><li>sub 1</li>
</nav>
</li>
<li>
<span>2</span>
<nav><li>sub 1</li>
<li>sub 2</li>
</nav>
</li>
</ul>
</div>