Run jQuery slideDown on each hover

Question

Im a newbie at jQuery, and Im trying to make a slide-down menu list. I have the following script:

<script>
$(document).ready(function() {
$('.menu>li').hover(function(){
$('.menu>li>ul').slideDown("slow");
});
});
</script>

It does slide down the drop-down list the first time after page load, but after that it just appears without sliding down until the page is refreshed. How would i get it to keep sliding down on each hover? I tried this, but it didn't work either:

<script>
$(document).ready(function() {
$('.menu>li').hover(function(){
$('.menu>li>ul').stop(true,true).slideDown("slow");
});
});
</script>

Here is the website I'm working on, and you can hover over "practice areas" to see. It's on an IP 72.41.8.193

Thanks.

Answer 1

You are telling jquery to slide the element down but never telling it to slide up again.

The hover function will take a mouse in and mouse out parameter, try.

$(document).ready(function() {
    $('.menu>li').hover(function(){
        $('.menu>li>ul').stop(true,true).slideDown("slow");
    }, // <-- this comma is important. 
//the anonymous function after this will run on mouse out
    function(){
        $('.menu>li>ul').stop(true,true).slideUp("slow");
    });
});

Answer 2

You may need to refactor some of your code a bit:

$('.menu > li').hover(function(){
    $(this).find('ul').stop().slideDown('slow'); 
}, function()
    $(this).find('ul').stop().slideUp('slow');
});

You will want to use this to find out WHICH menu item you're hovering over as well. the .find('ul') will get the next closest ul from .menu > li. Always remember to stop the animation so it doesn't bubble, then remember to use your second function of your hover to do something when you hover off.