Toggle dropdown menu on ul:focus - html

Question

I'm trying to create dropdown navigation with pure CSS and I want to show dropdown menu on ul click. Problem is that simple ul:focus > ul doesn't work even though there is anchor in it. Selectors :hover and :active are working without problems.
HTML
<li>Menu 1
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4
</ul>
</li>
CSS
#primary_nav_wrap ul li:hover > ul
{
display:block
}
Here's the code:
https://codepen.io/anon/pen/vgpQWV

Answer 1

Your selector needs to be #primary_nav_wrap ul li > a:focus + ul.
Breaking it down:
When the <a> directly inside the <li> has focus, apply these styles to the immediately adjacent <ul>.
Fixed example:
#primary_nav_wrap {
margin-top: 15px
}
#primary_nav_wrap ul {
list-style: none;
position: relative;
float: left;
margin: 0;
padding: 0
}
#primary_nav_wrap ul a {
display: block;
color: #333;
text-decoration: none;
font-weight: 700;
font-size: 12px;
line-height: 32px;
padding: 0 15px;
font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif
}
#primary_nav_wrap ul li {
position: relative;
float: left;
margin: 0;
padding: 0
}
#primary_nav_wrap ul li.current-menu-item {
background: #ddd
}
#primary_nav_wrap ul li:hover {
background: #f6f6f6
}
#primary_nav_wrap ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background: #fff;
padding: 0
}
#primary_nav_wrap ul ul li {
float: none;
width: 200px
}
#primary_nav_wrap ul ul a {
line-height: 120%;
padding: 10px 15px
}
#primary_nav_wrap ul ul ul {
top: 0;
left: 100%
}
#primary_nav_wrap ul li > a:focus + ul {
display: block
}
<h1>Testing menu</h1>
<nav id="primary_nav_wrap">
<ul>
<li class="current-menu-item">Home
</li>
<li>Menu 1
<ul>
<li>Sub Menu 1
</li>
<li>Sub Menu 2
</li>
<li>Sub Menu 3
</li>
<li>Sub Menu 4
<ul>
<li>Deep Menu 1
<ul>
<li>Sub Deep 1
</li>
<li>Sub Deep 2
</li>
<li>Sub Deep 3
</li>
<li>Sub Deep 4
</li>
</ul>
</li>
<li>Deep Menu 2
</li>
</ul>
</li>
<li>Sub Menu 5
</li>
</ul>
</li>
<li>Menu 2
<ul>
<li>Sub Menu 1
</li>
<li>Sub Menu 2
</li>
<li>Sub Menu 3
</li>
</ul>
</li>
<li>Menu 3
<ul>
<li class="dir">Sub Menu 1
</li>
<li class="dir">Sub Menu 2 THIS IS SO LONG IT MIGHT CAUSE AN ISSEUE BUT MAYBE NOT?
<ul>
<li>Category 1
</li>
<li>Category 2
</li>
<li>Category 3
</li>
<li>Category 4
</li>
<li>Category 5
</li>
</ul>
</li>
<li>Sub Menu 3
</li>
<li>Sub Menu 4
</li>
<li>Sub Menu 5
</li>
</ul>
</li>
<li>Menu 4
</li>
<li>Menu 5
</li>
<li>Menu 6
</li>
<li>Contact Us
</li>
</ul>
</nav>