предотвратить автоматическое скрытие пунктов мега-меню при наведении

Question

Итак, я делаю веб-страницу, и у меня есть это мегаменю, которое при наведении на него открывает свои элементы, но когда я наведите курсор на элементы, они будут скрыты.

В любом случае вот HTML-код:

<li class="dropdown mega-dropdown megaDropdown">
  <a href="#" class=" nav-link dropdown-toggle" data-toggle="dropdown">Activities<span class="caret"></span></a>
  <ul class="dropdown-menu mega-dropdown-menu">
    <li class="col-md-12">
      <div class="owl-carousel owl-theme navbar-carousel">
        <div class="item">
          <a href="#" class="nav-link">
            <img src="assets/01.png" alt="">
            <div class="carousel-navitem">
              Jump
            </div>
          </a>
        </div>
        <div class="item">
          <a href="#" class="nav-link">
            <img src="assets/01.png" alt="">
            <div class="carousel-navitem">
              Climb
            </div>
          </a>
        </div>
        <div class="item">
          <a href="#" class="nav-link">
            <img src="assets/01.png" alt="">
            <div class="carousel-navitem">
              Leap
            </div>
          </a>
        </div>
        <div class="item">
          <a href="#" class="nav-link">
            <img src="assets/01.png" alt="">
            <div class="carousel-navitem">
              Slide
            </div>
          </a>
        </div>
        <div class="item">
          <a href="#" class="nav-link">
            <img src="assets/01.png" alt="">
            <div class="carousel-navitem">
              Zip n'Trail
            </div>
          </a>
        </div>
        <div class="item">
          <a href="#" class="nav-link">
            <img src="assets/01.png" alt="">
            <div class="carousel-navitem">
              Skate n'Ride
            </div>
          </a>
        </div>
      </div>
    </li>
  </ul>
</li>

А вот код CSS, который я установил для запуска мега-триггера меню при наведении:

li.dropdown:hover > .dropdown-menu {
display: block;

}

Так что любой из вас, ребята, может помочь мне предотвратитьпункты мегаменю, которые должны исчезать при попытке навести на них курсор.

и снова триггер мегаменю при наведении курсора, а не при нажатии

С наилучшими пожеланиями ..

Answer 1

Добавьте этот CSS в свой стиль, и он должен оставаться видимым, когда вы наводите курсор на элементы.Если только между ними нет разрыва.Если так, дайте мне знать.

.dropdown-menu:hover {
    display: block;
}