Menu Drop Down não funciona no IE6

[schumacker 0]

Ae pessoal,

 

 

Fiz um menu drop down com CSS, testei no Firefox e no IE7 funcionou corretamente, porém no IE6 não!!

 

Como posso adequa-lo???

 

Segue o link para que vocês vejam o menu:

 

Meu Menu Drop Down

 

 

O código CSS é:

 

/* common styling */#menu {	width:99.8%;	padding:0px;	margin:0px;	border-top: 1px solid #FFFFFF;	background-color: #F1F3F5;	border-bottom: 1px solid #CCCCCC;	position:relative; }#menu, #menu a {	font-family: Arial, Helvetica, sans-serif; 	font-size:11px; 	text-decoration:none; 	color:#000000;}#menu ul li a, #menu ul li a:visited {	display:block; 	width:104px; 	height:20px; 	line-height:20px;	overflow:hidden;}#menu ul {	padding:0; 	margin:0;	list-style-type: none; }/* MENU  *//* Fundo da célula do menu  */#menu ul li {	float:left; 	margin-right:1px; 	position:relative;	text-align:center;}/* Fundo Over da célula do menu  */#menu ul li:hover {	background-color: #DDDDDD;	cursor:auto;}#menu ul li ul {	display: none;}#menu ul li:hover ul {	display:block; position:absolute; top:21px; left:0; width:105px;}#menu ul li:hover ul li ul {	display: none;}#menu ul li:hover ul li a {	display:block; }/* SUBMENU */ /* Submenu - fundo padrão (Menu de segundo nivel) */ #menu ul li:hover ul li {	background-color: #F1F3F5;	border-top: none;	display:block;	text-align:left;	text-indent: 10px;	border: solid 1px #F1F3F5;}/* Submenu - cor do Menu de terceiro nivel */ #menu ul li:hover ul li ul li{	margin-left:1px;	background-color: #F9F9F9;}/* Submenu - over */ #menu ul li:hover ul li:hover {	border: solid 1px #FF8000;	background:#F3E2D0;}/* Submenu - configuração do menu de terceiro nivel */ #menu ul li:hover ul li:hover ul {	display:block; position:absolute; left:105px; top:0;}/* Submenu - seta lateral para outro nivel de menu */ #menu  ul li:hover ul li.seta,#menu  ul li:hover ul li.seta:hover{	background-image: url(setaRight.gif);	background-repeat: no-repeat;	background-position: right center;}

[TheChessMan 0]

A pseudo-class :hover funciona apenas nos elementos '<a>' em versões abaixo do IE 7... para funcionar no IE6 é necessário javascript

[pa_bruno 0]

eh soh buscar... a gente sempre fala isso http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

essa parte d menu eh bastante comentada aki no fórum...

[micox 2]

Por javascript voce pode simular a parada.

 

Primeiro, coloque uma classe .over em todas as declarações que tem hover.

Por exemplo:

#menu ul li:hover ul li ul {

display: none;

}

Irá ficar:

#menu ul li:hover ul li ul , #menu ul li.over ul li ul {

display: none;

}

E depois coloque o seguinte script:

startList = function() {
//Corrige o bug do hover no IE
if (document.all&&document.getElementById) {
	navRoot = document.getElementById("nav");
	for (i=0; i<navRoot.childNodes.length; i++) {
		node = navRoot.childNodes[i];
		if (node.nodeName=="LI" ) {
			node.onmouseover=function() {
				this.className+=" over";
			}
			node.onmouseout= function() {
				this.className= this.className.replace(" over", "");
			}
		}
	}
}
}

 

Fonte: www.maujor.com

[schumacker 0]

Valeu pela dica!!! Com isto consegui implementar melhor esta função e fazer funcionar 100% o menu!!!

 

 

startList = function() {	if(document.all&&document.getElementById) 	{				navRoot = document.getElementById("menu").getElementsByTagName("UL");				for(i=0; i < navRoot.length; i++) 		{			for (k=0; k < navRoot[i].childNodes.length; k++) 			{				node = navRoot[i].childNodes[k];				if(node.nodeName == "LI") 				{					node.onmouseover=function() {						this.className+=" over";					}					node.onmouseout=function() {						this.className=this.className.replace(" over", "");					}				}			}		}	}}window.onload=startList;