Menu in Bootstrap 4 disappears when the mouse movement is slow

Question

I'm running this fiddle and when the mouse pointer moves quickly from from START to the unfolded menu, everything works great. However, when the movement is slower, the menu closes because it feels like the mouse's left.

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

Initially, I tried to make the list item control taller but realized quickly that the menu will open below it (plus this unfortunate vertical distance).

What can I do about it?

Apparently Bootstrap creators found this good for some reason (or didn't think about mouse movements but rather clicking). Am I setting up the hover event in an inappropriate way, perhaps?

Answer 1

for me is better this solution

here is the fiddle

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

Answer 2

Yes, it's caused with space between menu element and menu itself. When you are moving fast, it's ok, because cursor "jumps" directly to menu, but moving slowly, you will leave menu item area and menu disappear. One solution which comes to my mind is to move it 1px higher:

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

Working JSFiddle.

Answer 3

This css fixed it for me (Bootstrap v4.3.1):

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