slideDown drop down menu

Question

so I'm trying to make a nice little effect on my drop down menu, but i don't know the right way to use the hover and slideDown function

$('nav > div > ul > li').hover(function() {
    $('nav > div > ul > li > ul').stop(true, true).slideDown(200);
}, function() {
    $('nav > div > ul > li > ul').stop(true, true).slideUp(200);

});

that is what i have now, this don't work it shows my submenu regardless of what li I'm hovering, i want it to work so it is on the element and only the element that has the submenu.

EDIT: FIDDLE

Answer 1

Try this fiddle

http://jsfiddle.net/MzJNT/2/

I would suggest adding some ID for selectors like below

JS $( document ).ready(function() {

$('#parent').hover(function() {
    $('#submenu').stop(true, true).slideDown(200);
}, function() {
    $('#submenu').stop(true, true).slideUp(200);

});

 });

I am sure there is a more efficent way to do this but this is a good start.

EDIT

I think i found the actual issue with why it isn't sliding like you want it too, you have a style that is making it show instead of using the JS to make it show up

Remove this...

     nav > div > ul > li:hover > ul {
     display: block;
     }

or try this fiddle http://jsfiddle.net/MzJNT/9/