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

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

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