Ver Mensaje Individual
  #1 (permalink)  
Antiguo 15/08/2008, 14:41
Jamati
 
Fecha de Ingreso: febrero-2008
Mensajes: 578
Antigüedad: 16 años, 2 meses
Puntos: 3
Menu realizado pero no conforme

Hola foristas:

Tengo el siguiente codigo:

Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {margin:0;}
ul {margin:0;padding:0;} 
li {list-style:none;}

ul {width:200px;background:#FF0000;position:relative;}
ul li {font:11px Arial;border-bottom:1px solid #000000;}
ul li a {color:#FFFF00;display:block;text-decoration:none;line-height:38px;position:relative;}
ul li a:hover {color:#000000;background:#FFFF00;}
ul li ul {width:125px;display:none;position:absolute;left:200px;top:0px;}

ul.otro {width:200px;background:#FF0000;position:relative;}
ul.otro li {font:11px Arial;border-bottom:1px solid #000000;}
ul.otro li a {color:#FFFF00;display:block;text-decoration:none;line-height:38px;position:relative;}
ul.otro li a ul {width:125px;display:none;position:absolute;left:200px;top:0px;}
ul.otro li a:hover {color:#000000;background:#FFFF00;}
ul.otro li a:hover ul {display:block;}
</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>
<li><a href="#">- Fila numero 1</a></li>
<li onMouseOver="menu(this)" onMouseOut="menu(this)"><a href="#">- Fila con submenu</a>
  <ul>
    <li><a href="#">- Submenu 1</a></li>
    <li><a href="#">- Submenu 2</a></li>
    <li><a href="#">- Submenu 3</a></li>
  </ul>
</li>
<li><a href="#">- Fila numero 3</a></li>
<li><a href="#">- Fila numero 4</a></li>
</ul>

<br>
<br>
<br>

<ul class="otro">
<li><a href="#">- Fila numero 1</a></li>
<li><a href="#">- Fila con submenu
  <ul>
    <li><a href="#">- Submenu 1</a></li>
    <li><a href="#">- Submenu 2</a></li>
    <li><a href="#">- Submenu 3</a></li>
  </ul>
  </a>
</li>
<li><a href="#">- Fila numero 3</a></li>
<li><a href="#">- Fila numero 4</a></li>
</ul> 
en el cual, hay 2 menu. El primero utiliza una función de Javascript, funciona perfecto. Salvo que tengo una duda: porque en IE al pasar el mouse por arriba del menú no me toma todo el alto de 18px ??... es algo que no pude resolver y ya no sé que hacer.

Y otra consulta, en el segundo menu intenté hacerlo sin usar Javascript, pero como verán, no estoy ni cerca de lograrlo. Era mi idea así dejaba de usar el Javascript... alguien me puede orientar ?

Bueno, muchas gracias de antemano.