Javascript Nested Menu Slidedown?
<p>I made a nested menu slide down, but the problem is, if you continuously hover on and off the li to animate the nested ul to slide down, when you hover off, it will keep doing the animation as many times as it didn't get to finish when you were hovering on and off rapidly. I would like to make it so it won't register the animations until after it finishes going up and down all the way to prevent animations when you aren't hovering.</p>

<p>Here's my Javascript:</p>

<pre><code>function mainmenu() {
    $(" ul ul ").css({
        display: "none"
    }); 
    $(" ul li").hover(function () {
        $(this).find('ul:first').css({
            visibility: "visible",
            display: "none"
        }).slideDown(100);
    }, function () {
        $(this).find('ul:first').slideUp(100);
    });
}
$(document).ready(function () {
    mainmenu();
});
</code></pre>
