Jump to content

problema menu css no IE9


fil79
 Share

Recommended Posts

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

MCITP-MCTS-MCP

Link to comment
Share on other sites

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í.

"[Os jovens da actual geração]não lêem porque não envolve um telecomando que dê para mirar e atirar, não falam porque a trapalhice é rainha e o calão é rei" autor: thoga31

Life is a genetically transmitted disease, induced by sex, with death rate of 100%.

Link to comment
Share on other sites

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. 😁

MCITP-MCTS-MCP

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.