下拉悬停问题（jQuery）

我已经做了一个简单的下拉菜单，这很好，但我想在按钮和下拉菜单之间添加一些空间（在底部按钮/链接和顶部下拉菜单之间）

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

我可以在悬停时使li更高，但li附加了样式，因此我对此无能为力（a元素也附加了固定样式）

那么，如果我将下拉菜单的父菜单悬停在它的上方时，下拉菜单之间有空格，我如何使其保持活动状态呢

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>   

下拉菜单
下拉菜单
下拉菜单

执行此操作的典型方法是设置一个计时器，以关闭父级mouseleave事件的子菜单，但如果在子菜单上单击鼠标，则取消计时器。将此计时器设置为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 });

---

我想我明白了，虽然css在这里会很有帮助。我相信你的孩子

ul

有

位置：abosolute

，你在父母

li

上有

悬停。当两者同时使用时，您可以将鼠标从一个移动到另一个，而无需离开
li
，但一旦在两者之间留出间隙，将鼠标从链接移动到
ul
菜单将使父
li
触发
mouseleave

我可能的处理方法如下。不要重新定位子级
ul
，而是将该子级
ul
包装在一个div中。在div上放置一个
填充顶部
，并留出所需的空间。然后移动所有定位css和jquery内容以显示/隐藏/定位div。通过这种方式，从链接到菜单
ul
不会点击空白并隐藏，而是移动到透明div中，该div仍然是父
li
的一部分，菜单不会隐藏

希望这能有所帮助，css也能帮助你准确地了解你在做什么

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

简单的答案是增加顶级链接的
标记的底部填充。专门为他们创建一个新类或动态添加，如下所示：

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

你能把你的css和你正在做什么来增加空间（边距、填充、绝对位置等）包括进来吗？你可以在悬停的主列表中添加一个边框底部。使它变厚并与标题背景颜色相同，这样它将作为下拉菜单和菜单按钮之间所需的填充。但我还没有检查。按钮在哪里，您分配给谁<代码>ul

或

div