Bootstrap 4 Выпадающее меню при наведении на Jquery

Question

У меня есть Bootstrap выпадающее меню с анимацией Jquery. Анимация - это именно то, что мне нужно, но когда я перемещаю курсор мыши от имени Dropdown (.dropdown) к элементу Dropdown, он сходит с ума.

$('.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);
});

Вот мой код: https://codepen.io/nht910/pen/yLNqQwX

Как я могу решить эту проблему?

Большое спасибо.

Answer 1

Просто редактирование кода CSS решило проблему. Это из-за вертикального расстояния между .dropdown>div и .dropdown>a элементом

используйте его:

.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;
  }
}