Jquery SlideToggle在引导下拉菜单上具有相反的效果

我正试图用jQuery中的SlideToggle方法，使用SlideToggle和Twitter引导创建一个下拉导航菜单，但是我想要的行为与我想要的完全相反。它应该简单地在悬停时向下滑动，在鼠标上向上滑动

HTML：

$('.navbar-nav li').hover(function () {
    $(this).toggleClass('current').find('ul').stop().slideToggle('fast');
});

CSS：

$('.navbar-nav li').hover(function () {
    $(this).toggleClass('current').find('ul').stop().slideToggle('fast');
});

导入url（'http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
身体{
边缘顶部：60像素；
背景色：#000；
字体系列：Calibri、Arial、无衬线字体；
}
navbar先生{
高度：100px；
}
.导航条反转{
背景色：#000；
}
.navbar品牌{
背景图像：url（../assets/logo.png）；
背景重复：无重复；
宽度：188px；
文本缩进：-9999px；
}
.导航栏导航{
浮动：对；
}
.navbar nav>li{
显示：内联块；
浮动：左；
}
.navbar nav ul{
显示：无；
位置：绝对位置；
颜色：#fff；
列表样式类型：无；
背景色：rgba（0,0,0,1）；
空白：nowrap；
}
.导航栏导航李：悬停ul{
显示：块；
}
.导航栏导航李ul李a:悬停{
文字装饰：无；
颜色：#fff；
}
.导航栏导航a{
颜色：#999；
}

jQuery：

$('.navbar-nav li').hover(function () {
    $(this).toggleClass('current').find('ul').stop().slideToggle('fast');
});

---

我认为你应该删除这个css

.navbar-nav li:hover ul {
    display: block;
}

它应该工作正常；）

它在悬停时的工作原理是这样的css将display:block添加到这个ul中，然后使用slideToggle（）方法，它删除display:block thta，这就是为什么它在悬停时隐藏

范例

为了安全起见，请使用以下脚本：

$('.navbar-nav li').hover(function () {
    $(this).addClass('current').find('ul').slideDown('slow')
        },function() {
            $(this).removeClass('current').find('ul').slideUp();
  });

---

你应该考虑只使用CSS。我想，但是老浏览器（具体地说）。我知道，我明白了。好的，我会检查你的代码，但它现在看起来确实非常容易出错。注释以保持此线程的活力。如果你删除

li

s上的

float:left

，似乎效果会更好，因为它们已经有

display:inline块在他们身上。这管用！然而，我偶尔会遇到一个小问题（比如1/10次尝试），下拉菜单现在没有完全显示出来……并阅读了有关延迟的setTmieout、dispay下拉菜单和不错的效果