jQuery和CSS中下拉菜单的问题

Question

why slideDown() and slideUp() does not work true on my menu?
They are repeated several times with mouseover() .

see you: jsfiddle-my codes

$('#nav li').mouseover(function() {
        $('#nav li ul li').slideDown();
    })
    .mouseout(function(){
        $('#nav li ul li').slideUp();
    })

Answer 1

Try using hover (a shortcut for mouseenter and mouseleave ) instead, and change your selector:

$('#nav > li').hover(function() {
    $('#nav li ul li').slideDown();
}, function() {
    $('#nav li ul li').slideUp();
})

Example: http://jsfiddle.net/andrewwhitaker/jdsGx/

Previously, the events were bound to all li s under #nav . I think you just want direct children, which the child selector will get you

Answer 2

I would do this:

http://jsfiddle.net/5KEnp/4/

$('#nav > li').mouseenter(function() {
    $('ul li', this).stop(true, true).slideDown();
}).mouseleave(function(){
    $('ul li', this).stop(true, true).slideUp();
})