Interesting: on my Mac laptop running Firefox (11.0), physically clicking the trackpad works, but a single tap (my usual) does nothing. A double tap does work, but it selects the first word in the menu as well. It's a cute demo, but as it stands I wouldn't want to use it for anything serious.

Confirmed on mine, same setup.

Funny how things circle back.

This was the norm for drop-down menus before jQuery took over (more commonly used with :hover instead of :active). It's still used as a fallback and for simple drop-downs/tooltips.

This wasn't the norm because IE at the time couldn't handle :hover events properly on all delegations.

So everytime you used CSS :hover, you still needed a javascript shim to keep IE happy.

That's IE6, IE7 is fine. It was the norm, javascript was just a fallback. And if you go further back to Dreamweaver days, javascript was the norm again (remember MM_clusterufck)?

Can you enlighten me what MM_clisterufck is?

If I'm not mistaken, Dreamweaver uses a lot of custom JS code to generate pages and usually prefixes it with "MM_".

I've had the displeasure of seeing one of these functions recently, and let's just say it's not pretty JS.

No doubt an abbreviation for Macromedia, Dreamweaver's original creator.

This is pretty slick. A couple of tiny problems, though: it doesn't work in Opera, the dropdowns close immediately in Firefox, and clicking on an open dropdown doesn't close it again. Still, very neat. Even works on iOS!

I put a pure CSS drop down navigation thing on http://www.lfgss.com/ a few weeks ago and the users love it for being usable before the page has finished loading.

I love it for reducing some of the need for maintaining JavaScript for this kind of thing and that it works better than jQuery tabs (reflows on smaller screens).

The result is that I'm now looking at CSS for more things.

I would recommend making the drop down element an anchor though, rather than mucking around with adding cursors to try and get the interactivity communicated.

This works really well on touchscreens. A common problem with pure :hover dropdowns is that they only display for like a half second when you touch with your finger. I would have :hover AND :active do the exact same behavior to make this cross-platform.

On the other hand it doesn't work at all with keyboard.

True, you would need :focus, but then it wouldn't hide on mouseout.

This is preferable to :hover if it works ok cross-browser. I think/hope that most web developers have realized by now that displaying new UI-elements on hover is a bad idea, at least if they will hide other elements. Moving your mouse around is not "intent" to perform an action. A slight delay on a mouseover event is less evil though.

The cool thing :target allowed was those css3 only lightboxs (http://tympanus.net/Tutorials/CSS3Lightbox/). I might play around with this method and see if it works as well.