当鼠标移动缓慢时，Bootstrap 4中的菜单消失

我正在运行这个小提琴 ，当鼠标指针从START快速移动到展开的菜单时，一切都很好。 但是，当运动较慢时，菜单会关闭，因为它感觉就像鼠标左侧。

const menu = $("li.dropdown"); menu.on("mouseenter mouseleave", () => { menu.toggleClass("open"); }); 

最初，我试图使列表项控制更高但很快意识到菜单将在它下面打开（加上这个不幸的垂直距离）。

我该怎么办？

显然Bootstrap创建者出于某种原因发现了这个好处（或者没有考虑鼠标移动而是点击）。 我可能以不恰当的方式设置hover事件吗？

Answer 1

对我来说这个解决方案更好

这是小提琴

 .open>.dropdown-menu{ margin-top: initial; } 

Answer 2

是的，它是由菜单元素和菜单本身之间的空间引起的。 当你快速移动时，没关系，因为光标“直接跳转”到菜单，但移动缓慢，你将离开菜单项区域和菜单消失。 我想到的一个解决方案是将其移动1px：

 .open>.dropdown-menu { top: calc(100% - 1px); } 

工作JSFiddle 。