Estoy diseñando una página, que va a ser la primera que voy a intentar crear huyendo de las tablas y pasandome al css ;). Una vez pasada la "divitis" y otros síntomas, he llegado al momento de crear el menú de la web y no hay forma de conseguir uno efectivo con lo que yo quiero, con puro CSS.
Quiero conseguir algo así:

Al poner el ratón en Opcion1, se hace un rollover de imagen y se despliega el menú. Necesito usar una fuente medieval y no puedo usar un simple cambio de color de fuente, de ahi el rollover. Y al seleccionar una subopcion, otro rollover. Hasta ahí bien, por aquí encontré un código que me va perfecto y el rollover queda muy bien. Pero a la hora de desplegar el menú... un desastre.
He buscado por mil sitios, me he leído mil artículos, pero ninguno explica algo parecido a lo que quiero. No se si sería mejor usar Javascript y olvidarme porque la verdad es que me estoy desquiciando :P.
No me importaría que el menú quedara justo debajo de la opción, pero prefiero como en la primera imagen:

A ver si me iluminais un poco o me recomendáis pasarme a Javascript y olvidarme de CSS para el menú.
Un saludo y gracias a todos!