Foros del Web » Creando para Internet » CSS »

Menu desplegable que no despliega.

Estas en el tema de Menu desplegable que no despliega. en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 12/05/2008, 22:32
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Pregunta Menu desplegable que no despliega.

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> 
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #2 (permalink)  
Antiguo 12/05/2008, 23:19
 
Fecha de Ingreso: marzo-2008
Mensajes: 166
Antigüedad: 9 años, 8 meses
Puntos: 5
Re: Menu desplegable que no despliega.

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>
  #3 (permalink)  
Antiguo 13/05/2008, 02:12
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Menu desplegable que no despliega.



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.
  #4 (permalink)  
Antiguo 13/05/2008, 09:23
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Re: Menu desplegable que no despliega.

¡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!
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #5 (permalink)  
Antiguo 13/05/2008, 09:36
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Menu desplegable que no despliega.

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

<!--[if lte IE 6]>...<![endif]-->

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

<!--[if IE < 7]>...<![endif]-->

Mikel.
  #6 (permalink)  
Antiguo 13/05/2008, 09:49
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Re: Menu desplegable que no despliega.

¿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!
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de 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 15:16.