Menu desplegable con CSS

Buenos dias, estoy intentando realizar un menu desplegable empleando solamente CSS. Se trata de un menu horizontal de 3 niveles, y ha de funcionar de la siguiente manera: en un primer momento, se muestran las opciones del nivel 1; si pulso en una de esas opciones, se despliegan las opciones del nivel 2; si ahora pulso en una de las opciones del nivel 2, se despliegan las del nivel 3. Tengo que hacerlo con active y focus, ya que el despliegue es cuando se pica sobre la opcion deseada, no cuando se pasa el raton por encima. Consigo ver las opciones del nivel 1 y 2 de esta manera, pero no soy capaz de conseguir ver y que se me queden fijas las opciones del nivel 3. Este es el css que me permite ver las opciones del nivel 1 y 2.

#menu ul li ul {display: none;
}

#menu ul li:focus ul, #menu ul li:active ul{
display: block;
}

#menu ul li ul li ul{display: none !important;
}

Para que se me mostraran las de nivel 3, añadi el siguiente estilo:

#menu ul li ul li:focus ul, #menu ul li ul li:active ul{
display: block !important;
}

pero sin exito. ¿Alguien sabria como puedo conseguir el efecto buscado?

Muchas gracias de antemano. Saludos.

Hola, yo probé tu código en Firefox y funciona correctamente. Es importante que tengas encuenta que las pseudo-clases que usas no son compatibles en Internet Explorer, recién el IE 8 ofrece compaitibilidad con estas pseudo-clases y tampoco es de mucho fiar.

Lo más aconsejable para garantizar la compatibilidad es que realices tu menú usando Javascript de lo contrario te encontraras con muchos problemas para los usuarios de distintos navegadores.