[SOLUCIONADO] ¿Cómo animar menu con hover?

Virtualforos · #1 (**permalink**) 02/02/2012, 09:17

¿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:
[url]http://www.virtual.comocreartuweb.es/[/url]

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;}

leonidasesteban · #2 (**permalink**) 02/02/2012, 09:45

si lo que queires hacer es un meno que este oculto y aparezca al hacer hover te dejo este codigo para que le des un ojo :).
te aclaro que si lo que quieres es hacer un menú deberías usar listas como <ul> ahí te darás cuenta como se estructuraría bien tu menú, otra cosa la etiqueta <nav> solo úsala en tu menú principal, luego si quieres hacer otros menús usa solo <ul>.
PD: cuando hagas correr el ejemplo pasa el mouse por el área gris que es donde esta escondido el menú

Cita:

Virtualforos · #3 (**permalink**) 21/03/2012, 23:44

Hey gracias°!

ArturoGallegos · #4 (**permalink**) 21/03/2012, 23:59

la verdad que no entendí la lógica del compañero @leonidasesteban ni el sentido del código que ha expuesto.

si lo que buscas es un menú desplegable se realiza con el evento hover, pero su código presenta una gran cantidad de errores recurrentes por lo que difícilmente le funcionara, le recomiendo corregirlos antes de intentar el menú desplegable o cual fuera su intención.

le dejo unos ejemplos de menú desplegables para que analice su funcionamiento.
http://www.araudi.net/ejemplos/menus...ables_CSS.html