Entrar

Menu con elementos de lista de ancho uniforme

virtualcomo · ·
En este sitio http://www.virtual.comocreartuweb.es/ se podría observar que el menu muestra elementos de lista con background azul de diferentes longitudes. ¿Cómo se hace para que tengan un ancho uniforme?
olukarak · ·
Lo que tienes que hacer es darle un background al div que contiene todos los links.
virtualcomo · ·
No logro hacerlo, trate de ponerle el ancho en cada cosita que veia, incluso desde el html; pero no lo logre. Ahi siguen Registro, Ingreso y Ayuda, tan burlonamente dispares como siempre. ¿Qué lo estara impidiendo?

HTML
<!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>
<a id="buscar" href="#"><img id="imagenbuscar" src="imagenes/buscar.png"></a>
</div>

<div>
<ul id="menu"><li><a href="#"><img id="mas" src="imagenes/mas.png"></a><!--aca empiezan los items de la lista que se desplega--><ul><li><a href="#">Registro</a></li><li><a href="#">Ingreso</a></li><li><a href="#">Ayuda</a></li></ul><!--aca termina esa lista--></li></ul>

</div>

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

</nav>
</body>

</html>

CSS
@charset "utf-8";
/*Tres reglas de oro http://boozox.net/web/trucos-para-hacer-disenos-en-css-mas-rapido-y-mejor/*/
*{padding:0; margin:0; border:0;}
body{font-size:100%; text-align:center;}
img{border-width:0;}
/*Saca cuadrito a los links*/
a{outline-style:none; text-decoration:none;}


/*ubicacion y sombra para cuadros buscar, publicar y mas*/
#buscar,#publicar{position:absolute; top:2%; bottom:2%; width:37%; height:96%; text-align:center; font-family:Verdana, Geneva, sans-serif; border:thin solid;}
#buscar{left:1%; border-color:#70aaf0; box-shadow:0 0 30px #70aaf0; -webkit-box-shadow:0 0 30px #70aaf0; -moz-box-shadow:0 0 30px #70aaf0;}
#publicar{right:1%; border-color:#86db20; 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%; left:47.4%; width:5.9%; height::5.9%; 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) repeat-x; position: absolute; display: block; width: 37%; height:96%;}
#publicar:hover{background: url(imagenes/gradienteparacuadropublicar.png) repeat-x; position: absolute; display: block; width: 37%; height:96%;}

/*textos en 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%;}

/*menu*/
ul{list-style:none;}
#menu a{color:#c8c8c8; background-color:#black;}
#menu ul{display:none;}
#menu li:hover ul{display:block; list-style:none; position:absolute; top:53%; left:43%; text-align:left; font-family:Verdana, Geneva, sans-serif; font-size:20px;}
#mas:hover{background: url(imagenes/gradienteparamas.png) repeat-x; position: absolute; display: block;}
olukarak · ·
ul {
list-style: none;
background: #999;
}
olukarak · ·
¡Coño, que gracias tan original!