skip to Main Content

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

Expectation

2

Answers


  1. Here is the solution. I also had to change the markup. Necessary details are written in comments.

    .subnav ul {
        display: flex;
        gap: 20px;
    }        
    
    /* added codes =================================  */
    .subnav{
        visibility: hidden;
        position: absolute;
        left: -50px;
    }
    
    .nav-hover{
        position: relative;
    }
    
    .nav-hover:hover .subnav, .subnav:hover{
        visibility: visible;
    }
    
    .main-nav{
        display: flex;
        list-style: none;
    }
    
    .main-nav li a{
        margin: 0 15px;
    }
    /* added codes =================================  */
    <!-- 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>
                    <!-- You need to keep it in the nav-hover container so that you can target it using CSS -->
                    <div class="subnav" id="subnav">
                        <ul>
                            <li>Link1</li>
                            <li>Link2</li>
                        </ul>
                    </div>
                </li>
                <li class="nav-part"><a href="#">What's New</a></li>
    
            </ul>
        </div>       
    </div>
    Login or Signup to reply.
  2. .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>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search