如何修复这个JQuery下拉菜单？

Question

我试图在JQuery中创建一个下拉菜单，但它被证明是相当困难的。

我的代码如下：

  $(document).ready(function(){

        $('ul li').mouseover(function()
        {
              $(this).children("ul").show();
        });
        $('ul li ul').mouseover(function()
        {
              $('ul li ul').show();
        }).mouseout(function(){
              $('ul li ul').hide();
        });

  });

基本上，我想要将鼠标悬停在列表项上，然后将子ul下拉，然后我可以将鼠标悬停在列表项上，如果鼠标离开子导航，菜单将再次隐藏。

谢谢，基思

更新:我从CSS中删除了边框，它工作得很好，所以当我将鼠标悬停在1px的边框上时，似乎会触发鼠标输出，这很奇怪。

Answer 1

你知道superfish吗？它是一个菜单jQuery插件，具有出色的跨浏览器支持。它绝对不存在您正在经历的问题。我还没有检查源代码，但关键的区别是它增加了mouseout的延迟。这意味着，除非光标的位置在一段时间内稳定(默认延迟为800ms)，否则不会触发操作。这将解决您的问题，也是一件很好的实现，因为它将使您的菜单更加用户友好。

Answer 2

您应该使用jQuery's hover() function，因为它避免了所有特定于浏览器的问题。

如果不做一点测试，我会想象代码看起来会更像这样：

    $('.clearfix li').hover(function() {
          $('ul', this).show();
        }, function() {
          $('ul', this).hide();
        });

Answer 3

问题是，边界在“框外”。如果您只是将下拉菜单向上移动1个像素，这样它就会与菜单栏重叠1个像素，这会有所帮助。

只需将CSS中下拉菜单的顶部位置从30px改为29px，如下所示：

        ul li ul {
            border: none;
            position: absolute;
            top: 29px; /* <-- was 30px */