Jquery 下拉菜单错误答案

【问题标题】：Jquery Drop Down Menu ErrorJquery 下拉菜单错误
【发布时间】：2011-12-05 11:04:17
【问题描述】：

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

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

如果我确实将鼠标悬停在 submenu 上并且在我从 submenu 出去之后工作正常，但是如果我将鼠标悬停在 "Menú"按钮，当我用鼠标离开或离开菜单按钮后，子菜单仍然打开！ :( 对我来说效果不佳

如果我离开菜单或子菜单，我希望 sumenú 关闭。

谢谢！

【问题讨论】：

您使用 JavaScript 而不仅仅是 CSS 来实现这一点有什么特别的原因吗？

标签： jquery css drop-down-menu

【解决方案1】：

你遇到了一些问题

1 - 您需要为顶级项目设置宽度 - 没有宽度，它会填满屏幕的整个宽度 - 这就是它没有清除样式的原因。

2 - jquery hover 无需鼠标离开即可自行清除

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

这是工作小提琴。

顺便说一句，您可以使用纯 css 完成所有这些操作，但我已经编辑了您的示例，因为我认为您可能想要添加过渡动画或其他东西。

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

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

这里有一个为你使用纯css的版本，你需要做的就是添加

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

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

【讨论】：

感谢您让我在 Jquery 上工作得很好。 Css 不能正常工作。

【解决方案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上试试这个

【讨论】：

是的，我试过了，你也应该先试试。尝试低于第一个子菜单。
$("ul#topnav").mouseleave 试试这个它肯定有效jsfiddle.net/kamranali/WYMzX/10