Menu realizado pero no conforme

Jamati · #1 (**permalink**) 15/08/2008, 14:41

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.

emiliodeg · #2 (**permalink**) 15/08/2008, 15:15

los elementos en linea no respeta el alto ni margin o padding top y bottom

te recomiendo pasarlos a display:block

para hacer los menu y submenu con css solamente tenes q hacer
<ul>
<li><a href="#">link 1</a>
<ul>
<li><a href="#">sub link 1</a>
</li>
</ul>
</li>
<li><a href="#">link 2</a></li>
</ul>

ul ul {display:none}
a:hover + ul {display:block}

basicamente es se hacen asi

saludos

Mikmoro · #3 (**permalink**) 15/08/2008, 16:43

Un par de puntualizaciones:

Cita:

Iniciado por emiliodeg

los elementos en linea no respeta el alto ni margin o padding top y bottom

Los elementos de línea sí respetan el padding, de hecho es lo que más se utiliza para darles tamaño.

Cita:

Iniciado por emiliodeg

ul ul {display:none}
a:hover + ul {display:block}

basicamente es se hacen asi

El selector a:hover + ul no funcionará en IE6.

Jamati:

¿Te has echado un vistazo a los menús de las FAQ de CSS?

El número 5 es parecido a lo que estás intentando hacer. No es fácil hacerlo funcionar en IE6 sólo con CSS, por eso requiere código añadido sólo para ese maldito navegador. Enguarra un poco el código pero es transparente para el visitante.

Jamati · #4 (**permalink**) 16/08/2008, 12:41

Gracias emiliodeg y Mikmoro.

Cita:

los elementos en linea no respeta el alto ni margin o padding top y bottom
te recomiendo pasarlos a display:block

donde tengo que poner el display block para qeu el alto ocupe los 38ox cuando se pasa el mouse over como ocurre en FF pero no en IE ??

Cita:

Jamati:

¿Te has echado un vistazo a los menús de las FAQ de CSS?

Sinceramente no lo había visto, y ahora que me dijiste, encontré muchísiams cosas interesantes, están muy buens esas faqs. Con respecto al menu, está muy bueno y funciona perfecto el tuyo, ahora quiero analizar si me conviene para un futuro hacerlo con comentarios ocultos para IE6 o dejarlo con Javascript... me gustaría sacar las ventajas y desventajas de cada uno.

Gracias nuevamente.

Saludos

Jamati · #5 (**permalink**) 17/08/2008, 18:09

emiliodeg, gracias por la respuesta, pero ...

donde tengo que poner el display block para que el alto ocupe los 38px cuando se pasa el mouse over como ocurre en FF pero no en IE ??