Foros del Web » Creando para Internet » CSS »

Menu realizado pero no conforme

Estas en el tema de Menu realizado pero no conforme en el foro de CSS en Foros del Web. 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= ...
  #1 (permalink)  
Antiguo 15/08/2008, 14:41
 
Fecha de Ingreso: febrero-2008
Mensajes: 578
Antigüedad: 16 años, 1 mes
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.
  #2 (permalink)  
Antiguo 15/08/2008, 15:15
Avatar de emiliodeg  
Fecha de Ingreso: septiembre-2005
Ubicación: Córdoba
Mensajes: 1.830
Antigüedad: 18 años, 6 meses
Puntos: 55
Respuesta: Menu realizado pero no conforme

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
__________________
Degiovanni Emilio
developtus.com
  #3 (permalink)  
Antiguo 15/08/2008, 16:43
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: Menu realizado pero no conforme

Un par de puntualizaciones:

Cita:
Iniciado por emiliodeg Ver Mensaje
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 Ver Mensaje
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.
__________________
Visita mi nueva web idplus.org
  #4 (permalink)  
Antiguo 16/08/2008, 12:41
 
Fecha de Ingreso: febrero-2008
Mensajes: 578
Antigüedad: 16 años, 1 mes
Puntos: 3
Respuesta: Menu realizado pero no conforme

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
  #5 (permalink)  
Antiguo 17/08/2008, 18:09
 
Fecha de Ingreso: febrero-2008
Mensajes: 578
Antigüedad: 16 años, 1 mes
Puntos: 3
Respuesta: Menu realizado pero no conforme

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 ??
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 03:23.