Jquery下拉菜单错误

Question

我有一个下拉菜单menú你可以在下面的例子中看到:

http://jsfiddle.net/WYMzX/1/

如果我做进入悬停在子菜单和之后我从子菜单工作良好，但如果我做悬停在"Menú"按钮和我离开后或出去在Menú按钮用鼠标，子菜单仍然打开!

我想，如果我离开menú或submenú， sumenú是关闭的。

谢谢!

Answer 1

你有几个问题

1 -你需要为顶层项目设置一个宽度-没有宽度，它就会填充整个屏幕的宽度-这就是为什么它没有清除样式。

2 - jquery悬停可以自己清除而不需要mouseleave

3 -使用span并不是必要的，把你的class应用到你的li和a标签上，你就可以了。

这是工作小提琴。

顺便说一下，你可以用纯css做所有这些，但我已经编辑了你的例子，因为我认为你可能想要添加过渡动画或其他东西。 http://jsfiddle.net/WYMzX/4/

--------------- 编辑 --------------

这是一个使用纯CSS的版本，你所需要做的就是添加

  ul#topnav li:hover .submenu{
  display: block!important;
  }

http://jsfiddle.net/zandergrin/WYMzX/6/

Answer 2

试试这个，效果很好

$(document).ready(function() {
$("ul#topnav li a.dropdown").hover(function() {
    $("ul#topnav li ul.submenu").show(0);
});
$("ul#topnav li ul.submenu").hover(function() {
    $("ul#topnav li a.dropdown").addClass('top_nav_li_a_hover');
});

$("ul#topnav li").mouseleave (function() {

    $("ul#topnav li ul.submenu").hide(0);    
    $("ul#topnav li a.dropdown").removeClass('top_nav_li_a_hover');   
});

   });

与您使用的代码相同，只是将$("ul#topnav li ul.submenu").mouseleave替换为$("ul#topnav li").mouseleave