Question

我做了一个简单的下拉菜单，这个工作正常，但我想在按钮和下拉菜单之间添加一些空格（在底部按钮/链接和顶部下拉菜单之间）。

问题是，如果我不在按钮和下拉菜单之间添加空间它工作正常，但一旦我在它们之间添加空间，下拉菜单会在我离开按钮后返回隐藏。

我可以在悬停时使li更高但是li附加了它的风格所以我不能做这件事（也有一个元素附加了固定的样式）。

那么，如果我将鼠标悬停在其父级别之间，如果它之间有空格，我怎么能保持下拉菜单活着呢？

jQuery代码

    $('#sub-menu li').hover(function(){
        $(this).children('ul').stop(true,true).fadeIn(100);
    },function(){
        $(this).children('ul').stop(true,true).fadeOut(100);
    });

基本的HTML代码

<div>
    <ul>
        <li><a href="#">link</a>
            <ul>
                <li>dropdown menu</li>
                <li>dropdown menu</li>
                <li>dropdown menu</li>
            </ul>
        </li>
    </ul>
</div>

Answer 1

执行此操作的典型方法是设置计时器以关闭父级鼠标离开事件上的子菜单，但如果您在子菜单上进行鼠标中心则取消计时器。将此计时器设置为150-250ms通常可以为中等缓慢移动的鼠标提供足够的时间来保持预期的行为，但是当菜单打算关闭时不会感觉太迟。

未经测试，更像是伪代码，只是为了展示一般方法：

var submenuTimer = null;

$('#sub-menu li')
   .mouseenter(function(){
      $(this).children('ul').stop(true,true).fadeIn(100);
   })
   .mouseleave(function{
      submenuTimer = 
       setTimeout(
        function(){ $(this).children('ul').stop(true,true).fadeOut(100) }, 200
       );
   }); 

$('#sub-menu li ul').mouseenter(function(){ clearTimeout(submenuTimer });

Answer 2

我想我理解，虽然css在这里会非常有用。我相信您的孩子ul已position:abosolute，并且您的父hover上有li。当两者在一起时，您可以将鼠标从一个移动到另一个而不离开li，但是一旦在两者之间留下间隙，将鼠标从链接移动到ul菜单就会离开导致li触发的父mouseleave。

我可能处理的方式如下。而不是重新定位子ul，而是将ul包装在div中。在div上放置一个padding-top，并留出所需的空间。然后移动所有定位css和jquery的东西来显示/隐藏/定位div。这样，从链接到菜单ul不会打到空白区域并隐藏，它会移动到仍然是父li的一部分的透明div中，菜单不会隐藏

希望有所帮助，css将有助于确切了解您正在做什么。

编辑：创造了一个小提琴来展示这个想法。第一个链接显示问题，第二个显示修复，边框显示实际发生的情况，第三个是实际修复。

http://jsfiddle.net/fTmLh/

Answer 3

简单的答案是只为顶级链接增加<LI>标记的底部填充。专门为他们创建一个新类，或者即时添加它，如下所示：

   <li style="padding-bottom: 8px;">

下拉悬停问题（jQuery）

3 个答案: