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

Question

我正在运行this fiddle当鼠标指针从START快速移动到展开的菜单时，一切都很顺利。但是，当移动速度较慢时，菜单会关闭，因为感觉就像鼠标左侧一样。

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

最初，我试图让列表项控件更高但很快意识到菜单会打开 （加上这个不幸的垂直距离）。

我该怎么办？

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

Answer 1

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

here是小提琴

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

Answer 2

此CSS为我修复了该问题（Bootstrap v4.3.1）：

div.dropdown-menu {
    margin-top: 0 !important;
}

Answer 3

是的，它是由菜单元素和菜单本身之间的空间引起的。当你快速移动时，它没问题，因为光标＆＃34;跳跃＆＃34;直接进入菜单，但移动缓慢，您将离开菜单项区域和菜单消失。我想到的一个解决方案是将其移动1px：

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

工作JSFiddle。