Menu desplegable que no despliega.

daPhyre · #1 (**permalink**) 12/05/2008, 21:32

Hola a todos, aquí estoy atorado una vez más.

Hace tiempo, pedí ayuda para encontrar un código de como usar menús desplegables con CSS. Hoy por fin comenzé a implementarlos, pero algo muy extraño está ocurriendo. Tengo este código:

Código HTML:

#menu ul li ul{
	display:none;
}
#menu ul li:hover ul{
	display:block;
}

Teoricamente, eso debería de hacer el trabajo, pero a la hora de mover el mouse encima, no pasa nada. ¿Alguien podría decirme si hago algo mal? Les estaría muy agradecido. Por cualquier cosa, un fragmento resumido de mi menu html:

Código HTML:

<div id="menu">
<ul>
<li><a href="javascript:loadurl('main.html','main')" accesskey="P">Principal</a></li>
<li><a href="javascript:loadurl('faq.html','main')" accesskey="F">F.A.Q.</a></li>
<li><a href="javascript:loadurl('contact.html','main')" accesskey="C">Contactanos</a></li>
<li><a href="#" class="sub" accesskey="M">+ Mis Temas:</a></li>
<li>
 <ul class="submenu">
 <li><a href="javascript:changestyle('heaven.css','heaven.html','main')" accesskey="H">Heaven</a></li>
 <li><a href="javascript:changestyle('inferno.css','inferno.html','main')" accesskey="I">Inferno</a></li>
 </ul>
</li>
<li><a href="#" class="sub" accesskey="M">+ Más Temas:</a></li>
<li>
 <ul class="submenu">
 <li><a href="javascript:changestyle('sakred.css','sakred.html','main')" accesskey="S">Sakura Red</a></li>
 <li><a href="javascript:changestyle('plain.css','plain.html','main')" accesskey="P">Plain</a></li>
 </ul>
</li>
</ul>
</div>

GastoNike · #2 (**permalink**) 12/05/2008, 22:19

Hola ya entendí tu problema :P ... es que tampoco yo sabía porque no funcionaba pero es porque el problema sucede porque tu css marca que cuando el mouse pase por encima del elemento li aparezca ul li ul .... y pues tu elemento li no contenía nada (ya que el ul esta en display:none)... asi que necesitas agregarle un enlace que produzca el efecto display:block (espero me hayas entendido) esta es la solucion:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&iacute;tulo</title>

<style type="text/css">

#menu ul li ul{
	display:none;
}
#menu    ul    li:hover ul  {
	display:block;
}

</style>

</head>

<body>

<div id="menu">
<ul>
<li><a href="javascript:loadurl('main.html','main')" accesskey="P">Principal</a></li>
<li><a href="javascript:loadurl('faq.html','main')" accesskey="F">F.A.Q.</a></li>
<li><a href="javascript:loadurl('contact.html','main')" accesskey="C">Contactanos</a></li>
<li><a href="#" class="sub" accesskey="M">+ Mis Temas:</a></li>
<li><a href="#">Enlace</a>
 <ul class="submenu">
 <li><a href="javascript:changestyle('heaven.css','heaven.html','main')" accesskey="H">Heaven</a></li>
 <li><a href="javascript:changestyle('inferno.css','inferno.html','main')" accesskey="I">Inferno</a></li>
 </ul>
</li>
<li><a href="#" class="sub" accesskey="M">+ Más Temas:</a></li>
<li><a href="#">Enlace</a>
 <ul class="submenu">
 <li><a href="javascript:changestyle('sakred.css','sakred.html','main')" accesskey="S">Sakura Red</a></li>
 <li><a href="javascript:changestyle('plain.css','plain.html','main')" accesskey="P">Plain</a></li>
 </ul>
</li>
</ul>
</div>

</body>
</html>

Mikmoro · #3 (**permalink**) 13/05/2008, 01:12

A mi también me ha costado un poquillo ver el problema. Haz lo que te dice GastoNike, o de esta parte elimina lo que te señalo:

<li><a href="#" class="sub" accesskey="M">+ Mis Temas:</a></li>
<li>
<ul class="submenu">

Mikel.

daPhyre · #4 (**permalink**) 13/05/2008, 08:23

¡Excelente! Como se nota que he leido tanto el código que no me percaté de este mínimo detalle. ¡Muchas gracias a los dos! Ya le he probado, y al parecer con esto he logrado corregir tres bugs en una pasada. ¡Muchas gracias!

Ahora, abusando de su confianza: Esto funciona perfectamente para FF y (milagrosamente) para IE7, pero aun tengo el problema para IE6 (Y anteriores he de suponer). Para esto tengo un JavaScript que me ejecuta de forma distinta, pero es exclusivo para IE desafortunadamente, por lo que me bloquea el uso en FF. Por tanto, he aquí la pregunta:

Se que con el comando [!if ie] (O similar, ya luego lo investigo bien si aun lo necesito), puedo hacer que se incluya el javascript, pero dado que me funciona muy bien con IE7... ¿Hay alguna forma de incluir ese JS sólo si es IE6 o menor, y en caso contrario (IE7 y posterior, y los otros navegadores) no se incluya?

Muchas gracias de nuevo por su ayuda!

Mikmoro · #5 (**permalink**) 13/05/2008, 08:36

Sí, puedes poner "si es menor o igual que...", de esta forma:



o tambieén "si es menor que IE7":



Mikel.

daPhyre · #6 (**permalink**) 13/05/2008, 08:49

¿Alguna de las dos formas es "más correcta" o al menos menos propensa a errores inesperados?

He probado el primero, y salió perfecto en IE7 (Usa el CSS, no el JS). Probaré el FF en mi computadora después, que estoy en una ajena... Ahora el problema será conseguir alguien que lo pruebe en IE6 para asegurarme que funcione. Lo pondré en en area de opiniones más tarde que revise un par de detalles más, pero si alguien por aquí tiene IE6 y puede hacerme el favor de checarle, le estaría muy agradecido. Por si las dudas, es la página en mi firma. ¡Muchas gracias a todos por todo una vez más!