Question

我有一个下拉菜单，你可以在下一个例子中看到：

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

如果我将鼠标悬停在子菜单上并且我从子菜单出去工作正常，但是如果我将鼠标悬停在“Menú”上按钮，在我离开或用鼠标离开Menú按钮后，子菜单仍然打开！ :(并没有为我工作

我希望如果我离开男人或子女人那么sumenú就会关闭。

谢谢！

Answer 1

你遇到了一些问题

1 - 您需要为顶级项目设置宽度 - 没有宽度填充整个宽度 - 这就是为什么它没有;清除样式。

2 - jquery悬停可以自行清除而无需鼠标移动

3 - 使用跨度并不是必需的，将你的课程应用到你和标签，你就没事了。

这是工作小提琴。

顺便说一下，你可以用纯css完成所有这些，但我编辑了你的例子，因为我认为你可能想要添加过渡动画或其他东西。

http://jsfiddle.net/WYMzX/4/

--------------- EDIT --------------

这是一个使用纯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

在JS Fiddle

上试试

Jquery下拉菜单错误

2 个答案: