Animar un menu con hover en una imagen

**virtualcomo** · 31/01/2012, 22:06

¿Cómo lograr que al posar el mouse (hover) sobre la imagen (en este caso el signo mas), el menu desplegable aparezca?

Aca esta la página:
http://www.virtual.comocreartuweb.es/

El menu desplegable esta oculto con display:none. Yo pensaba que debería aparecer con ":hover" en conjunto con "display:block" o "display:inline", pero permanece oculto como si tuviera verguenza.

HTML

Código:

<!DOCTYPE HTML>
<html>

<head>

<meta charset="utf-8">
<title>Fleximercado</title>
<link href="estilos.css" rel="stylesheet" type="text/css">

</head>

<body>

<header>FLEXIMERCADO</header>

<nav>

<div id="izquierda">
<a id="buscar" href="#"><img id="imagenbuscar" src="imagenes/buscar.png"></a>
</div>

<div id="centro">
<a id="mas" href="#"><img id="imagenmas" src="imagenes/mas.png"></a>
<ul id="desplegable"><a id="registro" href="#"><li>Registro</li></a><a id="ingreso" href="#"><li>Ingreso</li></a><a id="ayuda" href="#"><li>Ayuda</li></a></ul>
</div>

<div id="derecha">
<a id="publicar" href="#"><img id="imagenpublicar" src="imagenes/publicar.png"></a>
</div>

</nav>

</body>

</html>

CSS

Código:

@charset "utf-8";
/*normaliza css/*/
*{padding:0; margin:0; border:0;}
body{font-size:100%; text-align:center;}
img{border-width:0;}
/*Saca subrayado y recuadro a todos los links*/
a{outline-style:none; text-decoration:none;}


/*ubicacion y sombra para los recuadros buscar, publicar y mas*/
#buscar,#publicar{position:absolute; top:2%; bottom:2%; width:37%; height:96%; border:thin solid;}
#buscar{border-color:#70aaf0; left:1%; box-shadow:0 0 30px #70aaf0; -webkit-box-shadow:0 0 30px #70aaf0; -moz-box-shadow:0 0 30px #70aaf0;}
#publicar{border-color:#86db20; right:1%; box-shadow:0 0 30px #86db20; -webkit-box-shadow:0 0 30px #86db20; -moz-box-shadow:0 0 30px #86db20;}
#mas{position:absolute; top:42%; bottom:46%; width:5.9%; height::5.9%; left:47.4%; box-shadow:0 0 20px #F00; -webkit-box-shadow:0 0 20px #F00; -moz-box-shadow:0 0 20px #F00;}

/*efecto de fondo gradiente*/
#buscar:hover{background:url(imagenes/gradienteparacuadrobuscar.png); position:absolute; display: block; background-size:100% 100%;}
#publicar:hover{background:url(imagenes/gradienteparacuadropublicar.png); position:absolute; display: block; background-size:100% 100%;}
#mas:hover{background:url(imagenes/gradienterojo.png); position:absolute; display: block; background-size:100% 100%;}

/*imagenes.png*/
#imagenbuscar{position:absolute; top:43%; left:20%; width:60%; height:10%;}
#imagenpublicar{position:absolute; top:43%; right:10.5%; width:75%; height:10%;}
#imagenmas{position:absolute; top:0; right:0; width:100%; height:100%;}

/*menu deplegable*/
#desplegable{list-style:none; position:absolute; box-shadow:0 0 20px #F00; -webkit-box-shadow:0 0 20px #F00; -moz-box-shadow:0 0 20px #F00; top:54.4%; left:40%; width:20%;}
#desplegable a{font-family:Verdana, Geneva, sans-serif; font-size:150%; color:grey; display:none;/*esto hace que el menu permanezca oculto*/}
#mas:hover a{display:block;}/*esto debería mostrar el menu desplegable*/
li:hover{background:url(imagenes/gradienterojo.png); background-size:100% 150%;text-shadow: 0 0 10px white;}

**siddel77** · 12/02/2012, 03:01

Eso no va a funcionar, lo unico que haces es que el display sea block para los <a> dentro del <a> con id "mas" que tiene el mouse encima, ese es el problema.

Para que funcione, tendrías que manejar todo dentro de un elemento, por ejemplo:
<div id="mas"><img blabla... /><ul>...</ul></div>

El ul lo pones display:none y luego haces #mas:hover ul{display:block}

Aclaro que no probe el codigo, pero debería funcionar.

Saludos!