Bootstrap 4 Dropdown menu hover with Jquery

Question

I have a Bootstrap Dropdown menu with an animation made by Jquery. The animation is exactly what I want but when I move my mouse cursor from Dropdown's name ( .dropdown ) to Dropdown's item, it's going crazy.

$('.dropdown').hover(function() {
    $(this).find(".dropdown-menu").first().stop(true, true).show("slide", {
        direction: "up"
    }, 250);
}, function() {
    $(this).find(".dropdown-menu").first().stop(true, true).hide("slide", {
        direction: "up"
    }, 250);
});

Here is my codepen: https://codepen.io/nht910/pen/yLNqQwX

How can I fix this problem?

Thank you so much.

Answer 1

Just editing your CSS code fixed the problem. It's because of the vertical distance between .dropdown>div and .dropdown>a element

use it:

.navbar {padding:0 !important;}
  .dropdown {
    position: relative;
    z-index: 2;
}
.dropdown> a{
   padding: 15px;
}
@media (min-width: 768px) {
  .dropdown>div {
     position: absolute;
     top: 80%;
     clip: rect(0.5rem, 9999px, 9999px, -9999px);
     z-index: 1;
  }
}