Custom dropdown select with css and html

Question

I'm trying to create a custom drop-down menu with html and css only. I'm wondering if is possible to work with focus instead of hover? now is on hover and works but I want to expand that select onclick.

Here I have a fiddle example: http://jsfiddle.net/RwtHn/1084/

Answer 1

EDIT: Here's a demo: http://jsfiddle.net/RwtHn/1087/
Wow. I'm surprised this is even possible with just HTML/CSS.

Answer 2

Don't use hover on the li, use hover on the a:

a:hover + ul, a:focus + ul, a:active + ul {}

DEMO