Responsive dropdown nav doesn't appear

Responsive dropdown nav doesn't appear
0

#1

made a simple responsive header/nav and i’m not sure why my menu dropdown doesn’t appear when i hover over the menu tab.

i’ve hidden my nav under line 36 and make it reappear line 53.

Pls help.

here’s my codepen link: https://codepen.io/easterrc/pen/oeMJWm


#2
header > a:focus nav ul

This will select a ul which has a nav parent, which has a a:focus parent, which has a header parent. But your nav ul is not a child of header > a:focus. AFAIK you can only change sibbling or children of the element you are using :focus or :hover on.

One way to fix this (might require some restyling), is putting your nav inside the header:

<header>
  <div class="logo">
    <img src="https://upload.wikimedia.org/wikipedia/commons/4/41/SEGA_logo.png" />
  </div>
  <a href="#">Menu</a>
         
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

And using the CSS plus selector:

header > a:focus + nav ul

#4

hey ben,

thanks for ur explanation!

but there’s some thing i still need to clarify. i thought

header > a:focus nav ul { display: block; }

meant that if my a tag(menu bar) which is nested under header is in focus, my nav ul will display as a block item?

i’ve tried building another simple menu using the same technique and it worked. you can check it out at https://codepen.io/easterrc/pen/WEgPMM?editors=0100.

at line 65, my code of

.navItems li:hover .subItems li {
display: block;
}

meant that anytime my list items(children of .navItems) are hovered, my .subitems li will appear and it worked.