problema menu css no IE9

[fil79]

Boas

Deparei hoje com um problema em relação a um menu dropdown feito em JS+ CSS. O mesmo apresenta um problema no IE9. O menu funciona correctamente em todos os restantes browsers (incluindo versões mais antigas do IE).

O que está a acontecer no ie é que ao colocar o cursor em cima do Menu 1, abre o dropdown, mas se mover o cursor para um dos submenus (ou seja estou a tirar de cima do Menu 1 ), a dropdown desaparece

Eis o código:

HTML:

<ul id="menu_dropdown" class="menubar">
	<li class="submenu"><a href="#">MENU1l   |  </a>
		<ul class="menu">
		     <li><a href='pag1.php?id=2'>SUB1</a></li>
                             <li><a href='pag1.php?id=6'>SUB2</a></li>
	       </ul>
                 </li>
</ul>

CSS

*MENU*/

ul.menubar{
	margin: 0px;
	padding: 0px;
	font-size: 100%;
	background-color: #FFFFFF; /* IE6 Bug */


}

ul.menubar .submenu{
	margin: 0px;
	padding: 0px;
	list-style: none;
	background-color: transparent;
	float:left;


}

ul.menubar ul.menu{
	display: none;
	position: absolute;
	margin: 0px;

}

ul.menubar a{
	padding: 5px;
	display:block;
	text-decoration: none;
	color: #777;
	padding: 5px;
	font-size: 9pt;

}


ul.menu, ul.menu ul{
	margin: 0;
	padding: 0;
	border-bottom: 1px solid #ccc;
	width: 170px; /* Width of Menu Items */
	background-color: #FFFFFF; /* IE6 Bug */
}

ul.menu li{
	position: relative;
	list-style: none;
	border: 0px;
	z-index:10000;
}

ul.menu li a{
	display: block;
	text-decoration: none;
	border: 1px solid #ccc;
	border-bottom: 0px;
	color: #777;
	padding: 5px 10px 5px 5px;

}

ul.menu li sup{
	font-weight:bold;
	font-size:7px;
	color: red;
}

/* Fix IE. Hide from IE Mac \*/
* html ul.menu li { float: left; height: 1%; }
* html ul.menu li a { height: 1%; }
/* End */

ul.menu ul{
	position: absolute;
	display: none;
	left: 149px; /* Set 1px less than menu width */
	top: 0px;
}

ul.menu li.submenu ul { display: none; } /* Hide sub-menus initially */
ul.menu li a:hover { color: #0066cc; }

e finalmente no js

   var navItems = document.getElementById("menu_dropdown").getElementsByTagName("li");
    
   for (var i=0; i< navItems.length; i++) {
      if(navItems[i].className == "submenu")
      {
         if(navItems[i].getElementsByTagName('ul')[0] != null)
         {
            navItems[i].onmouseover=function() {this.getElementsByTagName('ul')[0].style.display="block";}
            navItems[i].onmouseout=function() {this.getElementsByTagName('ul')[0].style.display="none";this.style.backgroundColor = "transparent";}
         }
      }
   }

Desde já agradeço

[brunoais]

Bem... Podias poupar um pouco se não usasses o getElementsByTagName() tantas vezes.

De qq modo, parece-me ser um problema com o "this". Procura na net para ver se há problemas com o this no IE9. Podes, de qq modo, usar o resultado anterior do getElementsByTagName('ul')[0] dentro da função.

Se bem q te diga... Esse código tem algumas falhas de conceção mas é bem melhor que muitos q vejo por aí.

[fil79]

obrigado pela resposta.

Realmente o código pode ser simplificado.

O problema era que o submenu aparecia ligeiramente abaixo do Menu principal no IE9. Ao descer para o submenu, este desaparecia porque havia um espaço (que não se via a olho nu), entre o menu e o submenu

Para funcionar bastou alterar:

        ul.menubar a{
                padding: 5px;
                display:block;
                text-decoration: none;
                color: #777;
                padding: 5px;
                font-size: 9pt;
                               
        }

/*PARA:*/

        ul.menubar a{
                padding: 5px;
                display:block;
                text-decoration: none;
                color: #777;
	padding: 5px 0px 0px 5px;
                font-size: 9pt;
                               
        }

Obrigado. 😁