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