I was playing around with this idea for a while, toggelable , css-only, menus, which are dismissed when clicked outside.

What helped me to see the solution is the fact, that every html element can receive :focus if it has tabindex attribute applied to it.
So basically, all I need to do after focus is applied, is to show the hidden div.

The benefit of this solution over javascript, is that, JS can’t capture events outside the body, making it difficult to know when user has clicked somewhere else.

In order to toggle, there’s a hidden element inside the button, which has it’s own tabindex, and when receiving focus, removes focus from parent, thus hiding the whole thing.