How To Create A Nested Dropdown Menu On Click With Focus (css Only)?

I asked previously a question about how to make a dropdown menu by css. Now I've got it to work beautifully. But now I need to make it react to on click. The menu I'm trying to cre

Solution 1:

It is not possible to do it simply with the :focus selector. In CSS, you cannot select the parent of an element, so as to keep the visibility with focus on a child. As an example:

element:focus-parent { /* this doesn't exist */ }

That simply does not exist as of right now. And you also cannot have focus on multiple elements, which adds on to the issue.

There are two ways that I can think of solving your problem:

1. Using the JavaScript event onclick instead of a CSS-only approach;
2. Maintaining the CSS-only approach and using input:checked instead of :focus for your triggers. It's known as The Checkbox Hack.