How to create a pure CSS horizontal onclick menu?

HTML & CSS
1

Hi,

I’d like to have a horizontal menu with 3 or more sub menus (nested lists) that appear on click instead of on hover and only in CSS (no JS).
Onclick because this way the user controls the menu, while with hover it closes accidentally which is annoying.
Pure CSS because if I can avoid adding javascript or keep things simple then I prefer to do so.

I searched the web few months ago and found some people mentioning that there could be a way to do it with CSS only but I didn’t see a precise technique. If I remember correctly it’s something that’s incompatible with IE6.

At the moment I built my menu with hover, using flepstudio.org tutorial.

Is there a robust solution for a pure CSS onlick menu ?

P.S. there seem to be a problem with searching this forum with word1 AND word2 AND word3 type of queries, so I couldn’t find a similar thread.

2

I’m pretty sure this is the only way to do it using :target pseudo http://www.visibilityinherit.com/code/css-popup-menu-demo4.php

If you want on click then your prob better off using JS.

3

Apparently it’s your site, could you tell me more on how it works ? and its limitation. thx

4

You can do it like this but its only useful as a trick and I would advise against using it:)

5

Could you too explain your technique ? (I don’t feel like deciphering experts’ code)

6

Hi,

You can find the full details in the quiz answer which I created the demo for.

The basics are that you you use the fragment identifier (#) to traverse to the dropdown part of the menu as you would with any in-page link. The resat of the code is just ensuring hthe menus are out of the way to start with and hidden with overflow;hidden.

The downside is that the area below the top level menu is underneath the hidden dropdowns and therefore any links in that section where the menu may appear could not be clicked. This means the technique is of limited use unless you had perhaps a picture under the menu.

Eric’s menu is similar and again uses fragment identifiers but also uses the :target pseudo class too apply styles to the destination and thus can bring the menus into view without impacting the page as in my example.