Javascript 悬停时保持Mega Menu可见的问题（主菜单外的Mega Menu）

我有一个简单的大菜单，如果用户将鼠标悬停在子菜单上或菜单项上，我会尝试保持子菜单（菜单外，而不是菜单内）可见。 但是，当我离开悬停菜单项时，子菜单将隐藏。我尝试对菜单项和菜单外的子菜单使用2悬停功能，但运气不好，子菜单仍然先滑动，然后再向下滑动

如上所示的eg具有以下代码：

jQuery（文档）.ready（函数（）{
var$=jQuery；
var_nav=$（“.menu wrapper li”）；
var_nav_offset=_nav.offset（）；
var_nav_height=_nav.outerHeight（）；
var wST=$（window.scrollTop（）；
$（“#菜单下拉列表”）.css({
‘顶部’：_nav_offset.top-wST+_nav_height
})
$（“.menu wrapper li”）.hover（函数（）{
$（“#菜单下拉列表”）.slideDown（）；
}，函数（）{
$（“#菜单下拉列表”）.slideUp（）；
})
$（“#菜单下拉列表”）。悬停（函数（）{
$（“#菜单下拉列表”）.slideDown（）；
}，函数（）{
$（“#菜单下拉列表”）.slideUp（）；
})
})

#菜单{
位置：相对位置；
填充顶部：10px；
文本对齐：居中；
}
#菜单ul{
显示：块；
背景:#f5；
线高：60px；
}
#菜单。菜单包装器。菜单项{
显示：内联块；
填充：5px20px；
颜色：#111；
}
#菜单下拉列表{
位置：固定；
排名：0；
左：0；
宽度：100%；
高度：自动；
z指数：999；
显示：无；
}
.下拉内容{
背景：#333；
颜色：#fff；
填充：20px；
}

主页
关于
联系

凤凰城

这里有一个可能的解决方案。您还可以在

mouseenter/mouseleave

函数中添加超时函数，以防止它们立即触发

jQuery（文档）.ready（函数（）{
var$=jQuery；
var_nav=$（“.menu wrapper li”）；
var_nav_offset=_nav.offset（）；
var_nav_height=_nav.outerHeight（）；
var wST=$（window.scrollTop（）；
$（“#菜单下拉列表”）.css({
‘顶部’：_nav_offset.top-wST+_nav_height
})
$（“.menu wrapper li”）.mouseenter（函数（）{
$（“#菜单下拉列表”）.stop（）.slideDown（）；
});
$（“.menu wrapper li，#menu dropdown”）.mouseleave（函数（）{
如果（！$（“#菜单下拉菜单”）。是（“：悬停”）{
$（“#菜单下拉列表”）.slideUp（）；
};
});
});
#菜单{
位置：相对位置；
填充顶部：10px；
文本对齐：居中；
}
#菜单ul{
显示：块；
背景:#f5；
线高：60px；
}
#菜单。菜单包装器。菜单项{
显示：内联块；
填充：5px20px；
颜色：#111；
}
#菜单下拉列表{
位置：固定；
排名：0；
左：0；
宽度：100%；
高度：自动；
z指数：999；
显示：无；
}
.下拉内容{
背景：#333；
颜色：#fff；
填充：20px；
}
#试验{
边缘顶部：100px；
}


主页
关于
联系

凤凰城

为什么子菜单必须在主菜单列表之外？多亏了css，你可以为菜单和子菜单嵌套ul，并且仍然分离视图。我正在创建一个应用程序，可以在平台上将普通的下拉菜单替换为大型菜单。要做到这一点，子菜单必须在主菜单列表之外