Hey there! After spending some time digging into this, I've hit a roadblock.
I'm struggling to figure out how to keep the sub-menu active even when the mouse is no longer hovering over it, similar to how the bootstrap menu functions.
Here's a link to the code I've been working on: http://jsfiddle.net/pentester/DDpH6/
<div id="nav_wrap">
<div id="nav">
<ul>
<li><a href="#">parent</a>
<ul>
...
lots of nested list items here
...
</ul>
...
more list items
...
$("#nav ul li").click(function(){
$("#nav ul li ul li").toggle();
});
$("#nav").mouseout(function(){
$("#nav ul li ul li").show();
});
This problem seems like it should have a simple solution, but for some reason, I just can't crack it!