HTML/CSS Dropdown navigation menu not showing

Question

I am trying to create a dropdown navigation that has a div box absolute which has visibility:none but I think when I am hovering, I am not using the correct element. Any help? I think the problem is with the last section of the code. Thanks

 .main-nav { background: #000; height: 30px; position: relative; overflow: visible; z-index: 2; width: 100%; left: 0; cursor: default; } .main-nav .inner{ height: 100%; } .main-nav>.inner{ text-align: justify; } .nav-links-container { position: static; /* background: red; */ height: 100%; } .nav-links{ padding: 0 0 0 3px; display: inline; margin-bottom: 20px; overflow: hidden; /*background-color: green; */ } li { vertical-align: top; padding: 5px; display: inline-block; /* background: blue; */ } li>a { color: #FFF; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; padding: 10px 9px 9px; margin: 0 -3px; } li>a:hover { background-color: white; color:#000; } .nav-level-2 { visibility: hidden; position: absolute; top: 30px; left: 0; width: 100%; height: auto; border-bottom: 5px solid #000; background: red; text-align: left; } .nav-level-2-container { padding-top: 40px; padding-bottom: 40px; -ms-flex: 0px 1px auto; -webkit-box-flex: 0; -webkit-flex: 0px 1px auto; flex: 0px 1px auto; } li>a:hover .nav-level-2{ display: block; }

 <nav class="main-nav"> <div class="inner max-girdle-width"> <div class="nav-links-container"> <ul class="nav-links"> <li class="nav-whats-new"> <a class="nav-level-1" href="#">What's New</a> <div class="nav-level-2"> <div class="nav-level-2-container row max-girdle-width"> <div><a href="#">Submenu</a> </div> </div> </div> </li> </ul> </div> </div> </nav>

Answer 1

You need to add visibility:visible on hover and add + symbol after hover as the sub menu div is outside of the anchor. li>a:hover .nav-level-2 to li>a:hover + .nav-level-2 . + refers next element of the hovered element.

 .main-nav { background: #000; height: 30px; position: relative; overflow: visible; z-index: 2; width: 100%; left: 0; cursor: default; } .main-nav .inner{ height: 100%; } .main-nav>.inner{ text-align: justify; } .nav-links-container { position: static; /* background: red; */ height: 100%; } .nav-links{ padding: 0 0 0 3px; display: inline; margin-bottom: 20px; overflow: hidden; /*background-color: green; */ } li { vertical-align: top; padding: 5px; display: inline-block; /* background: blue; */ } li>a { color: #FFF; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; padding: 10px 9px 9px; margin: 0 -3px; } li>a:hover { background-color: white; color:#000; } .nav-level-2 { visibility: hidden; position: absolute; top: 30px; left: 0; width: 100%; height: auto; border-bottom: 5px solid #000; background: red; text-align: left; } .nav-level-2-container { padding-top: 40px; padding-bottom: 40px; -ms-flex: 0px 1px auto; -webkit-box-flex: 0; -webkit-flex: 0px 1px auto; flex: 0px 1px auto; } li>a:hover + .nav-level-2{ visibility:visible; }

 <nav class="main-nav"> <div class="inner max-girdle-width"> <div class="nav-links-container"> <ul class="nav-links"> <li class="nav-whats-new"> <a class="nav-level-1" href="#">What's New</a> <div class="nav-level-2"> <div class="nav-level-2-container row max-girdle-width"> <div><a href="#">Submenu</a> </div> </div> </div> </li> </ul> </div> </div> </nav>

Answer 2

The selector at the end is incorrect. What you have specified selects all elements with the class 'nav-level-2' inside the anchor tag on hover. You need to select the div placed immediately after the anchor tag with the '+' selector. And also make the div visible.

To do that try changing the css code at the end to -

li>a:hover + .nav-level-2{
    visibility: visible;
}

EDIT :

To keep the menu open when moving the mouse pointer into it, you need to give the hover selector to the container div.

I have changed the last bit of the css to select the 'li' element with the class 'nav-whats-new' and I have used the hover selector on it to change the visibility of the 'nav-level-2' element -

li.nav-whats-new:hover .nav-level-2 {
  visibility: visible;
}

Here is the updated fiddle -

https://jsfiddle.net/hbbaq9tf/3/