Menu desplegable CSS, a veces no despliega...

[webefects]

Amigos muy buenos días tengo una consulta, a los mejor les paso...

Sucede que estoy implementando un menú desplegable en CSS(menú horizontal superior de color azul) que pueden ver en la siguiente dirección:

http://www.avances.com.pe/web2010_nuevo/index.php

Sucede que a veces funciona bien y otros no, me explico porque, luego de que el submenú se despliega este debe ocultarse al sacar el mouse, pero a veces se oculta y en otros casos sigue desplegado, estando en mi misma máquina sucede eso... es puro CSS, será porque por otro lado tengo algún .js que trabaja con estilos y que hace conflicto? Hasta ahora ese problema solo lo he notado para IE con el resto de Navegadores no he tenido problemas....

Espero puedan darme alguna idea de que está sucediendo

Muchas Gracias!
Miguel Angel

[Calizman]

Saludos!

No sé con que versión de IE te sucede ya que lo veo con IE8 y va bien.

Para ver lo que dices del JS te aconsejo que lo quites y pruebes. Si se queda bien, era el JS, si se sigue trabando, no.

Hasta Luego!

[webefects]

Hola Calizman, lo he testeado en IE6, IE7, IE8, FIREFOX Y CRHOME.

En IE7 pasa ese problema.

Esta es otra manera de darse cuenta... Si entro http://www.avances.com.pe/web2010_nuevo/index.php muevo el mouse sobre el menú (sin hacer click), todo esta ok, luego dejo la ventana tal cual por un tiempo, digamos unos 5 minutos, paso de nuevo el mouse sobre el menu y sale el problema, las subopciones no se esconden. Estoy revisando los .JS pero nada... seguiré intentando..

Saludos y gracias!
Miguel

[webefects]

Hola amigos, ya tengo una referencia del porque me sale el error... si doy click a una zona fuera de la página (por ejemplo a los lados) y vuelvo a pasar el mouse por el menu.. las subopciones se quedan desplegadas... algunos href estan con "#", voy a ver revisarlo en detalle.. espero tambien puedan darme una ayuda.

Gracias!
MIGUEL

[Triby]

Dado que no tienes efectos de transicion, podrias hacer el menu sin Javascript, lo que ademas tambien te ayudaria a que los buscadores puedan indexar todo tu sitio. Puedes ver algunos ejemplos en www.araudi.net, creados por un genio del CSS.

[webefects]

Hola Triby gracias por el dato, de todas maneras descargare alguno de esos menus para trabajarlos. Sin embarlo igual deseo resolver este problema.

Tengo una info adicional. Mi menu usa este pequeño script:


sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagNam e("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

La verda es qeu se poco de Java o Jscript...

En FF y Chrome el menú esta excelente, el problema esta en el IE (6, 7 y 8) que el submenu se queda desplegado luego de dar clic a cualquier zona de la página.

He subido el menú solo en la siguietne url:

http://www.avances.com.pe/web2010_nu...nu_prueba.html

Gracias por la atención!
Miguel

[Triby]

Bueno, te recomiendo colocar aqui el CSS del menu, para ver si podemos encontrar el problema.

[webefects]

Hola Triby gracias por el interés

CODIGO CSS:
-----------------


BODY {
FONT-FAMILY: Trebuchet MS, Arial, Helvetica, sans-serif;
}
img {
border:0px;
}
#nav {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
LINE-HEIGHT: 1;
PADDING-TOP: 0px;
LIST-STYLE-TYPE: none;
font-family:Trebuchet MS, Arial, Helvetica, sans-serif;
font-size:11px;
}
#nav UL {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
LINE-HEIGHT: 1;
PADDING-TOP: 0px;
LIST-STYLE-TYPE: none;/*width:250px;*/
}
#nav A {
DISPLAY: block;
WIDTH: 16em;
color:#FFFFFF;
text-decoration:none;
}
#nav LI {
FLOAT: left;/*WIDTH: 10em;*/

}
#nav LI UL {
BACKGROUND: white;
LEFT: -999em;
WIDTH: 16em;
POSITION: absolute;
border-top-width: 1px;
border-right-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-left-style: solid;
border-top-color: #072294;
border-right-color: #072294;
border-left-color: #072294;
}
#nav LI UL A {
padding:0.5em;
border-bottom-color:#072294;
border-bottom-style:solid;
border-bottom-width:1px;
WIDTH: 15em;
color:#072294;
}
#nav LI UL A:hover {
background-color:#072294;
color:#ffffff;
}
#nav LI UL UL {
/*MARGIN: -2.4em 0px 0px 16em;*/
MARGIN: -2.22em 0em 0em 16em !important;
BACKGROUND: white;
}
#nav LI UL UL UL {
MARGIN: -2.22em 0em 0em 16em !important;
BACKGROUND: white !important;
}
#nav LI:hover UL UL {
LEFT: -999em;
}
#nav LI:hover UL UL UL {
LEFT: -999em;
}
#nav LI.sfhover UL UL {
LEFT: -999em;
}
#nav LI.sfhover UL UL UL {
LEFT: -999em;
}
#nav LI:hover UL {
LEFT: auto;
}
#nav LI LI:hover UL {
LEFT: auto;
}
#nav LI LI LI:hover UL {
LEFT: auto;
}
#nav LI.sfhover UL {
LEFT: auto;
}
#nav LI LI.sfhover UL {
LEFT: auto;
}
#nav LI LI LI.sfhover UL {
LEFT: auto;
}
#content {
CLEAR: left;
COLOR: #ccc;
}



CODIGO JAVASCRIPT:
--------------------------


sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagNam e("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);


El menú trabaja solo con esos 2 archivos.

GraciasMiguel