Menu In Bootstrap 4 Disappears When The Mouse Movement Is Slow

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

Solution 1:

for me is better this solution

here is the fiddle

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

Solution 2:

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

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

Solution 3:

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.