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