como desplegar un menu Con solo CSS desde un div o imagen

[C2am]

Podría ser:

Código HTML:

<div id="menu">
<!-- acá la imagen que ocupará todo el div menu -->
<img src=blavla/>
<!-- acá el menu dentro de una lista -->
<ul>
<li><a href=blabla >enlace1</a></li>
<li>< a href=blablo>enlace2</a></li>
</ul>
 
</div>
 

Siendo el css

Código CSS:

<style type="text/css">
 
<!--
#menu {
width: 820loquequieras;
margin: loquequieras loquequieras;
position:relative;
}
 
/*estilo para la lista menu */
#menu ul { list-style-type: none; display:none;}
#menu ul li a {width: 160px; padding: 6px 0px 8px 0px; border-top-color: #000;}
 
 
/* estilo al pasar el mouse sobre el div menu - para visualizar el menu*/
#menu:hover{position: relative; }
#menu:hover ul{display: block; position: absolute;left: 0px; }
 
-->
</style>
 

EDITO: esto funciona al pasar el mouse sobre el div, no al hacer click.
No tengo idea de si se puede eso solamente con css. Creo que es necesario usar javascript