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

[XtremeBook]

hola amigos quiero que cuando pasen el raton por encima de un div o por encima de una imagen se me despliegue un menu hacia abajo.

por ejemplo que cuando pasen el mouse por encima de

<div id="top-bar-log">

</div>

se me despliegue un menu con varias opciones.
he buscado pero solo aparece menu desplegable con UL Y LI pero no aparecen con imagenes.

gracias de antemano!

[memoadian]

si quieres que aparezcan imágenes o las colocas dentro de li, o se las pones como background.

[C2am]

Simplemente ubica una imagen dentro del <li><img src=blabla/></li>
Saludos

En www.araudi.net puedes encontrar varios ejemplos que puedes acomodar a tu gusto

PD: no ví la respuesta de memodian, por eso mi respuesta es similar a la suya. De todas formas mi respuesta es mejor. ¿Por qué? porque yo lo digo

[XtremeBook]

lo que quiero es que cuando den click en una imagen (SIN LETRAS O PALABRAS SOLO UNA IMAGEN) se despliegue un menu hacia abajo con opciones.

[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