Quote:
header > a:focus nav ul
That selector targets a
<ul>
tag inside a
<nav>
tag, which is inside a focussed
<a>
tag, which is a direct descendant of a
<header>
tag.
Now look at the structure of your markup:
div [class="wrapper"]
┊
┝ header
┊ ┊
┊ ┝ div [class="logo"]
┊ ┊
┊ └ a [menu]
┊
└ nav
┊
└ ul
The
<nav>
you're trying to target isn't nested under the
<a>
; it isn't even nested under the
<header>
; it's a
sibling of the
<header>
.
To make the menu work, you'd need to duplicate the
<nav>
under the menu trigger. However, you can't nest an
<a>
tag inside another
<a>
tag, so you'd need to change the menu trigger element. For example:
<div class="wrapper">
<!--
<header>
<div class="logo">
<img src="https://upload.wikimedia.org/wikipedia/commons/4/41/SEGA_logo.png" />
</div>
<div class="menu" tabindex="0">
Menu
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
header > .menu:focus nav ul {
display: block;
}
NB: You need the
tabindex
on the menu trigger, since a
<div>
can't be focussed without it.