Question 219291 in Html Question posted in
Some basic documentation can be found here.

Html – Hover nav-bar sub nav should be visible

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

Tags:

2

Answers


  1. 0

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