I'm currently working on a web page that features a mega menu. When I hover over the mega menu, it displays its items. However, when I try to hover over the items, they disappear.
Here is the HTML code snippet:
<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>
Here is the CSS code I used to make the mega menu trigger on hover:
li.dropdown:hover > .dropdown-menu {
display: block;
But, I'm facing an issue where the mega menu items disappear when I try to hover over them. Any suggestions on how to resolve this issue and keep the mega menu items visible when hovering?
Just to clarify, the mega menu should trigger on hover, not click.
Thank you for your help!