Hola a todos, tengo la siguiente duda, mejor dicho problema, hace días y no lo puedo resolver. Antes de escribir aquí quise resolverlo y no tuve exito. El siguiente codigo adjunto, fijense ustedes de probarlo en FF y en IE.
En Firefox no hay ningun drama, veran algo normal, pero en el maldito IE pueden ver como cada fila del menu se agranda un poco... y la verdad no se como solucionarlo.
Código HTML:
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
ul.menu {width:200px;background:#CC0000;margin:0;padding:0;}
ul.menu li {height:50px;border-bottom:1px solid #5586AA;position:relative;list-style:none;}
ul.menu li a {[COLOR="Red"]display:block[/COLOR];height:100%;font:10px Arial,Helvetica,sans-serif;color:#FFF;}
ul.menu li ul {display:none;position:absolute;width:120px;left:250px;top:5px;background:#000000;}
</style>
<script language="JavaScript">
function menu(llamador)
{
var valor = llamador.parentNode.getElementsByTagName('ul')[0];
valor.style.display = valor.style.display == 'block' ? 'none' : 'block' ;
}
</script>
</head>
<body>
<ul class="menu">
<li><a href="#" onMouseOver="menu(this)" onMouseOut="menu(this)">FILA 1</a>
<ul>
<li><a href="#">Fila 1</a></li>
<li><a href="#">Fila 2</a></li>
</ul>
</li>
<li><a href="#" onMouseOver="menu(this)" onMouseOut="menu(this)">FILA 2</a>
<ul>
<li><a href="#">Fila 1</a></li>
<li><a href="#">Fila 2</a></li>
</ul>
</li>
<li><a href="#" onMouseOver="menu(this)" onMouseOut="menu(this)">FILA 3</a>
<ul>
<li><a href="#">Fila 1</a></li>
<li><a href="#">Fila 2</a></li>
<li><a href="#">Fila 3</a></li>
<li><a href="#">Fila 4</a></li>
</ul>
</li>
</ul>
</body>
</html> Si saco el "display:block" que marque con rojo y en su lugar pongo un width, se soluciona en explorer pero no funciona en FF, ya que quiero que el link ocupe todo el ancho de la lista.
Mil gracias desde ya a alguien que pueda resolver este misterio-