When I trying to hover on PARK sub-nav should appear but its not and it should overlap on hero-slider
.subnav ul {
display: flex;
gap: 20px;
visibility: hidden;
}
.nav-hover:hover .subnav {
visibility: visible;
}
<!-- Nav Bar -->
<div class="header">
<div class="navbar">
<ul class="main-nav">
<li>
<a href="#"><img src="./assets/asset 0.png" alt=""></a>
</li>
<li class="nav-part"><a href="#">Shop</a></li>
<li class="nav-part nav-hover"><a href="#">Parks</a></li>
<li class="nav-part"><a href="#">What's New</a></li>
</ul>
</div>
<div class="subnav" id="subnav">
<ul>
<li>Link1</li>
<li>Link2</li>
</ul>
</div>
</div>
Want achieve the below output
2
Answers
Here is the solution. I also had to change the markup. Necessary details are written in comments.
You have two errors. First, the
ul
is hidden but the hover attempts to change the display of<div class="subnav" id="subnav">
which wasn’t hidden. You need to either change the display of theul
or hide.subnav
instead of theul
.Second,
.subnav
is not a descendent of.nav-hover
. You’ll need to go up to either the first common sibling container or parent container and use the:has
pseudo-class to apply style to.subnav