CSS only menu, click to disappear - css

Question

I have a menu structured like this:
<div class="nav">
<div class="drnav">
<ul class="ulMenu">
<li>
<div class="menuHeader">My Home</div>
<div class="menu-content">
<ul>
<li>item1</li>
<li>item3</li>
</ul>
</div>
</li>
<li>
<div class="menuHeader">My Stuff</div>
<div class="menu-content">
<ul>
<li>item4</li>
<li>item6</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
My css is setup so that when you hover over a menuHeader element the menu-content element is displayed (i.e. display: inline). This all works fine but what I want is that when you click one of the links in the list item elements within the menu-content that the menu (i.e. the parent menu-content element) disappears. Of course I want to do this without any JavaScript. I saw one example that used pointer-events but that restricts use to IE 11 and I'd like to support at least IE 10 if not 9 as well. Any suggestions on how to get this to work?

Answer 1

Technically it's possible, but it's much ado about nothing (hard to use it in practice):
.ulMenu .menu-content {
display: none;
}
.ulMenu > li:hover .menu-content {
display: inline-block;
}
.ulMenu > li .menu-content:target {
display: none;
}
<div class="nav">
<div class="drnav">
<ul class="ulMenu">
<li>
<div class="menuHeader">My Home</div>
<div class="menu-content" id="menuContent_1">
<ul>
<li>item1</li>
<li>item3</li>
</ul>
</div>
</li>
<li>
<div class="menuHeader">My Stuff</div>
<div class="menu-content" id="menuContent_2">
<ul>
<li>item4</li>
<li>item5</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
Besides, once you close a menu the only way to reopen it is by opening another and hovering the initial one.
Important note:
I would like to point out having a :hover based menu is a huge disadvantage compared to having a JavaScript based menu. Because more than half of today's traffic is coming from touch devices (and you don't hover much on a touch-device, do you?) while only less than 1% of traffic has JavaScript disabled.
So, could you perhaps explain why you ask for a pure CSS solution? The only practical use for pure CSS I had in past 8 years was for a payment gateway page, where JavaScript was strictly off. But, other than that?
I happen to know my way around CSS, but I was never keen on trying to transfer DOM manipulations to CSS, instead of leaving them for JavaScript. After all, that's what JavaScript is for. Use the right tool for the job. The job here is DOM manipulation. So use JavaScript.
Here's is the input/label solution I described in the comments. I realized they don't have to be checkboxes, I can use the :focus state to hide the menu contents. It's still buggy, in the sense that a click anywhere in the page is needed to make the :hover work again for the recently closed menu. But it's the closest you can get with CSS only or, at least, that's what I think.
.menuHeader input:focus + label,
.menuHeader label {
display: none;
}
.menuHeader:hover label
{
display: inline-block;
}
input.hidden {
position: absolute;
opacity: 0;
pointer-events: none;
}
<ul class="ulMenu">
<li>
<div class="menuHeader">
<div>My Home</div>
<input id="menuContent_1" class="hidden" type="text" />
<label class="menu-content" for="menuContent_1">
<ul>
<li>item1</li>
<li>item2</li>
</ul>
</label>
</div>
</li>
<li>
<div class="menuHeader">
<div>My Stuff</div>
<input id="menuContent_2" class="hidden" type="text" />
<label class="menu-content" for="menuContent_2">
<ul>
<li>item4</li>
<li>item5</li>
</ul>
</label>
</div>
</li>
</ul>

Answer 2

Changed the HTML tags not for semantics but for clarity. I find Nested lists easier to visualize if every other level is represented by <dl>, <dt>, <dd> list elements.
Used hidden radio inputs since it's the easiest way to maintain a 'state' (ex. 'on' and 'off') indefinitely using only CSS.
Targeting elements is done by pairing off groups of <label>s and <input type="radio">s.
Used the visibility property because it's ability to keep children elements of an element with visibility: hidden visible if said child had visibility: visible explicitly set.
I'm not sure what use it really is to remove the parent of a menu and wasn't sure if OP wanted the parent back or not. So the headings aren't really gone when the menu items are clicked, they are just invisible. If you want them back, just click the space above the lists.
SNIPPET
body {
background: #222;
}
li {
text-decoration: none;
display: inline-block;
cursor: pointer;
padding: 3px;
margin-bottom: 12px;
}
.rad {
display: none;
}
.rad + label,
dd {
visibility: hidden;
}
dl:hover dd,
.rad:checked + label {
cursor: pointer;
visibility: visible;
color: #fc2;
}
dd label:hover {
background: #930;
border: .5px solid cyan;
}
<nav class="mainNav">
<div class="drNav">
<ul class="mainMenu">
<li>
<dl class="menuContent">
<input id='rad0' class='rad' name='radA' type='radio' checked>
<label for='rad0'>
<dt class="menuHeader">HOME___</dt>
</label>
<dd>
<label for='rad1'>
<input id='rad1' class='rad' name='radA' type='radio'>Item1
</label>
</dd>
<dd>
<label for='rad2'>
<input id='rad2' class='rad' name='radA' type='radio'>Item2
</label>
</dd>
</dl>
</li>
<li>
<dl class="menuContent">
<input id='rad3' class='rad' name='radB' type='radio' checked>
<label for='rad3'>
<dt class="menuHeader">CONTENT</dt>
</label>
<dd>
<label for='rad4'>
<input id='rad4' class='rad' name='radB' type='radio'>Item3
</label>
</dd>
<dd>
<label for='rad5'>
<input id='rad5' class='rad' name='radB' type='radio'>Item4
</label>
</dd>
</dl>
</li>
</ul>
</div>
</nav>