Menu desplegable

[juanpro]

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;
}

[Mikmoro]

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.

[juanpro]

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

[sumolari]

Podrías probar a ponerle al flash un estilo que tenga z-index bajo para que los submenús estén por encima...

[Mikmoro]

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.

[mbavio]

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.

[Shade]

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)

[Mikmoro]

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

Mikel.

[mbavio]

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.