Hover nav-bar sub nav should be visible

Question

When I try to hover on PARK sub-nav it should appear but it doesn't and it should overlap on hero-slider.

My code:

.subnav ul {
    display: flex;
    gap: 20px;
    visibility: hidden;
}


.nav-hover:hover .subnav {
    visibility: visible;
}

    <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>

I want achieve the below output:

Answer 1

.subnav ul {}
.nav-hover:hover .subnav {}

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 the ul or hide .subnav instead of the ul.

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

.navbar:has(.nav-hover:hover) ~ .subnav ul { /* ~ general sibling combinator */
  visibility: visible;
}

.header:has(.nav-hover:hover) .subnav ul { /* descendent combinator */
  visibility: visible;
}

.subnav ul {
  display: flex;
  gap: 20px;
  visibility: hidden;
}

.header:has(.nav-hover:hover) .subnav ul {
  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>