jquery - slideDown 下拉菜单

Question

所以我想在我的下拉菜单上做一个不错的小效果，但我不知道如何使用悬停和 slideDown 功能的正确方法

$('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);

});

这就是我现在所拥有的，这不起作用它显示我的子菜单，无论我悬停在什么地方，我希望它能工作所以它在元素上并且只有具有子菜单的元素。

编辑:FIDDLE

Answer 1

试试这个 fiddle

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

我建议为选择器添加一些 ID，如下所示

JS $(文档).ready(函数(){

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

});

 });

我相信有更有效的方法来做到这一点，但这是一个好的开始。

编辑

我想我发现了真正的问题，为什么它没有像你想要的那样滑动，你有一种让它显示的样式，而不是使用 JS 来让它显示

删除这个...

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

或者试试这个 fiddle http://jsfiddle.net/MzJNT/9/