[Bootstrap 4] Dropdown navbar menu on hover

dropdown-hover.js

// Dropdown navbar menu on hover
$('.dropdown-menu', this).css('margin-top', 0);
$('.dropdown').hover(function () {
    $('.dropdown-toggle', this).trigger('click').toggleClass("disabled");
});

i try this it is notworking

Works. Thanks!

$('.dropdown-toggle').hover(function () { $(this).trigger('click').toggleClass("disabled"); });
I think that's better

The second solution avoids the UX annoyance where the menu disappears when you try to re-enter after leaving (because it doesn't catch the original mouseleave event for some reason.

But the menu still stays open after leaving the drop down. Also, there a bad toggle when hovering over the main menu item from the dropdown.

Eventually went this with this, as it avoids all those issues and is pure CSS :)

.dropdown-menu {
  margin: 0;
}
.dropdown:hover > .dropdown-menu {
  display: block;
}

$('.dropdown-toggle').hover(function () { $(this).trigger('click').toggleClass("disabled"); });
I think that's better

Thanks!