Foros del Web » Creando para Internet » HTML »

Menu desplegable

Estas en el tema de Menu desplegable en el foro de HTML en Foros del Web. Hola amigos quisiera hacerles una consulta estoy haciendo un menu desplegable, pero tengo un lebe problema cuando paso el mouse por el link principal y ...
  #1 (permalink)  
Antiguo 26/02/2007, 17:16
 
Fecha de Ingreso: septiembre-2003
Ubicación: lima
Mensajes: 378
Antigüedad: 14 años, 3 meses
Puntos: 0
Menu desplegable

Hola amigos quisiera hacerles una consulta estoy haciendo un menu desplegable, pero tengo un lebe problema cuando paso el mouse por el link principal y se despliega los submenus y quiero ir a seleccionar uno de los submenus se desaparece hay un espacio entre el submenu y el link pricipal ese espacio es el que hace que haiga ese problema, pero si bajan rapido el mouse si se mantiene visible el menu, como lo soluciono?

Aqui el ejemplo: http://www.juanhh.com/web/

Les dejo el codigo:

Gracias de antemano

/* Root = Horizontal, Secondary = Vertical */

#caja {
background-image:url(../images/fondo_menu.gif);
background-repeat:no-repeat;
padding-left:15px;
margin-left: 28px;
}

ul#navmenu {
margin: 0;
border: 0 none;
padding: 0;
width: 625px; /*For KHTML*/
list-style: none;
height: 29px;
padding-top: 2px;
}

ul#navmenu li {
margin: 0;
border: 0 none;
padding: 0;
float: left; /*For Gecko*/
display: inline;
list-style: none;
position: relative;
height: 23px;
}

ul#navmenu ul {
margin: 0;
border: 0 none;
padding: 0;
width: 160px;
list-style: none;
display: none;
position: absolute;
top: 27px;
left: 0;
}

ul#navmenu ul:after /*From IE 7 lack of compliance*/{
clear: both;
display: block;
font: 1px/0px serif;
content: ".";
height: 0;
visibility: hidden;
}

ul#navmenu ul li {
width: 160px;
float: left; /*For IE 7 lack of compliance*/
display: block !important;
display: inline; /*For IE*/
}

/* Root Menu */
ul#navmenu a {
border: 1px solid #fff;
border-right-color: #fff;
border-bottom-color: #fff;
padding: 0 6px;
float: none !important; /*For Opera*/
float: left; /*For IE*/
display: block;
background: #fff;
color: #666;
font: bold 10px/22px Arial, Verdana , Helvetica, sans-serif;
font-size: 12px;
text-decoration: none;
height: auto !important;
height: 1%; /*For IE*/
}

/* Root Menu Hover Persistence */
ul#navmenu a:hover,
ul#navmenu li:hover a,
ul#navmenu li.iehover a {
color: #000;
}

/* 2nd Menu */
ul#navmenu li:hover li a,
ul#navmenu li.iehover li a {
float: none;
background: #EEE;
color: #666;
font-size: 11px;
font-weight: normal;
}

/* 2nd Menu Hover Persistence */
ul#navmenu li:hover li a:hover,
ul#navmenu li:hover li:hover a,
ul#navmenu li.iehover li a:hover,
ul#navmenu li.iehover li.iehover a {
background: #CCC;
color: #FFF;
}

/* 3rd Menu */
ul#navmenu li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li a {
background: #EEE;
color: #666;
}

/* 3rd Menu Hover Persistence */
ul#navmenu li:hover li:hover li a:hover,
ul#navmenu li:hover li:hover li:hover a,
ul#navmenu li.iehover li.iehover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover a {
background: #CCC;
color: #FFF;
}

/* 4th Menu */
ul#navmenu li:hover li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li.iehover li a {
background: #EEE;
color: #666;
}

/* 4th Menu Hover */
ul#navmenu li:hover li:hover li:hover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover li a:hover {
background: #CCC;
color: #FFF;
}

ul#navmenu ul ul,
ul#navmenu ul ul ul {
display: none;
position: absolute;
top: 0;
left: 160px;
}

/* Do Not Move - Must Come Before display:block for Gecko */
ul#navmenu li:hover ul ul,
ul#navmenu li:hover ul ul ul,
ul#navmenu li.iehover ul ul,
ul#navmenu li.iehover ul ul ul {
display: none;
}

ul#navmenu li:hover ul,
ul#navmenu ul li:hover ul,
ul#navmenu ul ul li:hover ul,
ul#navmenu li.iehover ul,
ul#navmenu ul li.iehover ul,
ul#navmenu ul ul li.iehover ul {
display: block;
}
  #2 (permalink)  
Antiguo 26/02/2007, 17:39
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

Hola, juanpro.
Normalmente estas cosas se resuelven con un padding. Se trata de quitarle algo de alto al menu, para añadírselo en padding, de manera que quede a la misma distancia pero en lugar de con espacio, con relleno.

Prueba con esto a ver qué tal te va:

ul#navmenu li {
margin: 0;
border: 0 none;
padding: 0;
float: left; /*For Gecko*/
display: inline;
list-style: none;
position: relative;
height: 23px;
}

ul#navmenu ul {
margin: 0;
border: 0 none;
padding: 0;
width: 160px;
list-style: none;
display: none;
position: absolute;
top: 24px;
left: 0;
padding-top: 3px;
}

Ya contarás si te sirve.

Mikel.
  #3 (permalink)  
Antiguo 26/02/2007, 23:33
 
Fecha de Ingreso: septiembre-2003
Ubicación: lima
Mensajes: 378
Antigüedad: 14 años, 3 meses
Puntos: 0
Re: Menu desplegable

Gracias amigo Mikel te agradesco mucho, pero sabes ahora me aparece otro problema los submenus aparecen debajo del flash

A que se debera

Gracias de antemano
  #4 (permalink)  
Antiguo 27/02/2007, 00:30
Avatar de sumolari  
Fecha de Ingreso: mayo-2006
Ubicación: localhost
Mensajes: 1.367
Antigüedad: 11 años, 7 meses
Puntos: 18
Re: Menu desplegable

Podrías probar a ponerle al flash un estilo que tenga z-index bajo para que los submenús estén por encima...
  #5 (permalink)  
Antiguo 27/02/2007, 02:45
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

Pues me suena haberlo leído por aquí, pero no recuerdo dónde. Se trata al parecer de algo del propio diseño del flash, que al hacerlo debes decirle que sea background o algo así.

Supongo que alguien recordará el asunto para comentarte, o igual buscando por el foro lo encuentras.

Mikel.
  #6 (permalink)  
Antiguo 27/02/2007, 08:25
Avatar de mbavio  
Fecha de Ingreso: agosto-2005
Mensajes: 288
Antigüedad: 12 años, 3 meses
Puntos: 4
Re: Menu desplegable

Se soluciona agregandole un parametro al elemento object, llamado "wmode", y su valor debe ser "transparent":

<param name="wmode" value="transparent" />

Por si quieres informarte con mas detalle, aqui encuentras información útil.

Saludos.
  #7 (permalink)  
Antiguo 27/02/2007, 08:39
Avatar de Shade  
Fecha de Ingreso: noviembre-2006
Mensajes: 262
Antigüedad: 11 años, 1 mes
Puntos: 1
Re: Menu desplegable

Amplio la info... tambien debes ponerle dentro del embed del flash wmode="transparent"

Asi lo toma tanto en FF como en internet explorer de forma correcta.

Y lo que dijo mbavio ponerlo asi... <param name="wmode" value="transparent></param>

Sino internet explorer 6 lo toma de forma incorrecta (6 o 7... no recuerdo xD)
  #8 (permalink)  
Antiguo 27/02/2007, 10:20
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

Apunto para otra vez, porque yo de flash...

Mikel.
  #9 (permalink)  
Antiguo 27/02/2007, 15:29
Avatar de mbavio  
Fecha de Ingreso: agosto-2005
Mensajes: 288
Antigüedad: 12 años, 3 meses
Puntos: 4
Re: Menu desplegable

Gracias por la ampliacion, Shade, lo de cerrar la etiqueta param no la sabia, la verdad es que no he tenido ese problema antes. Saludos.
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 08:45.