Munu dropdown nao aparece no ie6

dream1702 · Novembro 27, 2007

Oi pessoa, será que vcs podem me ajudar?

Estou com um menu dropdown que não quer funcionar de jeito nenhum no ie6.

Ouvi falar que preciso de um Javascript para o ie6, mas não estou conseguindo.

Alguem ja passou por essa experiência?

Obrigado

webflex · Novembro 27, 2007

Olá,

Teria como disponibilizar seu código ou colocar um link online (opção mais facilitada) para a gente poder ver seu problema?

Cumps \o/

dream1702 · Novembro 27, 2007

Olá,

Teria como disponibilizar seu código ou colocar um link online (opção mais facilitada) para a gente poder ver seu problema?

Cumps \o/

Claro

Minha lista está assim:

<ul id="outros" >
					<li class="marromseta"><a href="#" class="marromseta">Radares</a>
						<ul>
						  <li><a href="#" class="marrom">produto</a></li>
						  <li><a href="#" class="marrom">produto</a></li>
						  <li><a href="#" class="marrom">produto</a></li>
						  <li><a href="#" class="marrom">produto</a></li>
						</ul>
					</li>
				</ul>

meu css:

/*#####OUTROS#######*/

body {
	margin: 0;

}
#outros  {
	float:left;
	width:auto;
	list-style: none;
	padding:0;
	margin:0px;
	color:#333333;
}
#outros ul  {
	float: left;
	width: auto;
	list-style: none;
	background: #F7F7F7;
	opacity: .8; filter: alpha(Opacity=80); -khtml-opacity: .8;
	padding: 0;
	margin: 0 0 1em 0;
	font:  12px/16px Verdana, Tahoma, Arial;
}
#outros a {
	display:block;
	text-decoration: none;
	padding: 0.25em 0.7em;
	color: #333333; /* cor da fonte do primeiro nível*/
	font:10px/14px Verdana, Tahoma, Arial;
	
	
}
#outros li {
	float:left;	
	padding:0;
}
#outros li ul {
	position: absolute;
	left:-999em;
	width:14em;
	w\idth:13em; 
	font-weight: normal;
	margin:0;
}
#outros li ul a {
	width: 1em;
	w\idth: 14em; 
	border:0px;
}
#outros li ul ul {margin: -7.75em 0 0 12.9em;}
#outros li:hover ul ul, #outros li.sfhover ul ul, #outros li.sfhover ul ul ul {left: -999em;}
#outros li:hover ul, #outros li li:hover ul, #outros li li li:hover ul, #outros li.sfhover ul, #outros li li.sfhover ul, #outros li li li.sfhover ul {left: auto;}
/*preenchimento*/
#outros a.marrom:hover, #outros li.marromsetadois:hover, #outros li.marromseta:hover {
	background: #E3E3E3;
 	
}
#outros a.marromseta, #outros marromseta{width:relative;}
/*#outros li.marromseta li, #outros .marrom li{border:1px solid #DADADA;}  */
#outros li.marrom ul, #outros  li li.marrom ul, #outros  li.marromseta ul{border:1px solid #CDCDCD;}
#outros a.marrom {color:#555555;}
#outros a.marromseta {
	
	color:#555555;
}
#outros a.marromseta:hover, #outros a.marromsetadois:hover{
	background:#E3E3E3;
	
}
#outros a.marromsetadois {
	
	color:#555555;
}

Tem uma função JAVASCRIPT aqui mas mesmo asism não está funcionando.

A função é essa:

<script>
sfHover = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("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);


</script>

Muito obrigado pela ajuda

webflex · Novembro 27, 2007

Olá,

A meu ver eu penso que o problema começa aqui:

#outros li:hover ul, #outros li li:hover ul, #outros li li li:hover ul, #outros li.sfhover ul, #outros li li.sfhover ul, #outros li li li.sfhover ul {left: auto;}

em que o nosso famoso amigo IE6 não consegue ler o atributo :hover para elementos sem ser <a>, por isso o suplemento do javascript, no entanto eu nem com o Javascript conseguir ir lá, o que você me passou :s. Javascript também não é o meu forte. Penso que o problema seja mesmo do Javascript, no entanto eu vou deixar um bom link de referencia do site do maujor em que funciona bem ;).

Link

Daí é só você formatar o CSS como quiser ;), que o resultado será o mesmo.

Cumps \o/

dream1702 · Novembro 27, 2007

Mito obrigado webflex;

Eu ja havia visto o link e essa seria minha segunda opção, enfim.... eresolvi usar este menu do Maujor mesmo.

Só que, eu não estou conseguindo fazer o seguinte:

Coloquei um background, para quando a pessoa passar com o mouse sobre o link, ficar com o fundo da cor que eu quero. Arranquei o color no final da CSS.

ficou assim:

/* Link a:hover */ 
ul.menu li a:hover {  background: #E3E3E3;  }

Perfeito, ta funcionando, mas está acontecendo o seguinte, só fica background quando passo sobre as letras do link, e eu preciso que fique em qualquer lugar do menu. Antes tbm o link só mudava de cor sobre as letras.

Da uma olhada no exemplo de como ficou o menu do Maujor.

Preciso Fazer ativar, passando em qualquer lugar do quaradinho.

Muito obrigado

webflex · Novembro 27, 2007

Olá,

Para isso é so acrescentar um display: block no elemento do link ;).

Exemplo:

a:hover { background: #000; display: block; }

Cumps \o/

dream1702 · Novembro 27, 2007

Olá,

Para isso é so acrescentar um display: block no elemento do link ;).

Exemplo:
a:hover { background: #000; display: block; }
Cumps \o/

Mais uma vez muito obrigado pela ajuda:

Vamos lá.....

No eu reparei que no ff antes de colocar o block , ja estava do jeito que eu quero, porém no ie7 não está.

Minha css está assim ó:

O display blok entrou bem no final do documento.

/* CSS Document */


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

/* Borda  do menu */
ul.menubar .menuvertical 
{ 
   margin: 0px; 
	 padding: 0px; 
	 list-style: none; 
	 
   /*border: 1px solid #ccc; */
   float:left; 
} 

ul.menubar ul.menu 
{ 
   display: none; 
   position: absolute; 
   margin: 0px; 
} 
/* Cor font do menu principal */
ul.menubar a 
{ 
   padding: 5px; 
   display:block; 
   text-decoration: none; 
   color: #555555; 
   padding: 5px; 
} 


ul.menu, 
ul.menu ul 
{ 
   margin: 0; 
   padding: 0; 
   /* Borda ultima linha do sub-menu */
   border-bottom: 1px solid #ccc; 
   width: 190px; /* Tamanho dos menus item */ 
   /* Fundo do sub-menu */
   background-color: #F7F7F7; /* IE6 Bug */ 
   opacity: .9; filter: alpha(Opacity=90); -khtml-opacity: .9;
   
} 

ul.menu li 
{ 
   position: relative; 
   list-style: none; 
   border: 0px; 
} 
  /* Bordas ultima linha do sub-menu */
ul.menu li a 
{ 
   display: block; 
   text-decoration: none; 
   border: 1px solid #EAEAEA; 
   border-bottom: 0px; 
   color: #555555; 
   padding: 5px 10px 5px 5px; 
   
} 

/* 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 */ 


/* Link a:hover */ 
ul.menu li a:hover {  background: #E3E3E3; display: block;  }

Valeu!!!!

webflex · Novembro 27, 2007

Olá,

Qualquer coisa é só postar ;), tentaremos ajudar no que pudermos.

Cumps \o/

dream1702 · Novembro 27, 2007

Olá,

Qualquer coisa é só postar ;), tentaremos ajudar no que pudermos.

Cumps \o/

Não consegui explicar direito heheh.

No IE continua sem o back ground, só aparece se eu passar o mouse sobre as letras do menu e não no bloco.

Quero que apareça quando passar sobre os blocos ou nas letras também ; Como se o bloco fosse uma área de ativação.

Obrigado

webflex · Novembro 27, 2007

Olá,

Lol, desculpe, pensei que o problema estava resolvido.

Passe-me seu CSS e HTML.

(Suponho que o CSS seja esse ai de cima)

Cumps \o/

dream1702 · Novembro 27, 2007

Ok obrigado

Coloquei tudo junto para voc copiar e colar:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<script type="text/javascript"> 

// Drop


function horizontal() { 

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

} 

</script> 



<style type="text/css">
/* CSS Document */


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

/* Borda  do menu */
ul.menubar .menuvertical 
{ 
   margin: 0px; 
	 padding: 0px; 
	 list-style: none; 
	 
   /*border: 1px solid #ccc; */
   float:left; 
} 

ul.menubar ul.menu 
{ 
   display: none; 
   position: absolute; 
   margin: 0px; 
} 
/* Cor font do menu principal */
ul.menubar a 
{ 
   padding: 5px; 
   display:block; 
   text-decoration: none; 
   color: #555555; 
   padding: 5px; 
} 


ul.menu, 
ul.menu ul 
{ 
   margin: 0; 
   padding: 0; 
   /* Borda ultima linha do sub-menu */
   border-bottom: 1px solid #ccc; 
   width: 190px; /* Tamanho dos menus item */ 
   /* Fundo do sub-menu */
   background-color: #F7F7F7; /* IE6 Bug */ 
   opacity: .9; filter: alpha(Opacity=90); -khtml-opacity: .9;
   
} 

ul.menu li 
{ 
   position: relative; 
   list-style: none; 
   border: 0px; 
} 
  /* Bordas ultima linha do sub-menu */
ul.menu li a 
{ 
   display: block; 
   text-decoration: none; 
   border: 1px solid #EAEAEA; 
   border-bottom: 0px; 
   color: #555555; 
   padding: 5px 10px 5px 5px; 
   
} 

/* 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 */ 


/* Link a:hover */ 
ul.menu li a:hover {  background: #E3E3E3; display: block;   } 




</style>


</head>

<body onload="horizontal();">

<ul id="barra" class="menubar"> 
				
				
	   
		<li class="menuvertical"><a href="#">Contato</a>
			<ul id="nav" class="menu">
			   <li><a href="#" class="menu">Fale Conosco</a></li>
			  <li><a href="#" class="menu">Suporte Técnico</a></li>
			  <li><a href="#" class="menu">Suporte Técnico</a></li>
			  <li><a href="#" class="menu">Suporte Técnico</a></li>
			  <li><a href="#" class="menu">Suporte Técnico</a></li>
			  <li><a href="#" class="menu">Suporte Técnico</a></li>
			  
			</ul>
		</li>
		
		</ul> 
		


</body>
</html>

Muito obrigado!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

webflex · Novembro 27, 2007

Olá,

Experimente:

ul.menu li a.menu { width: 100%; }

Cumps \o/

dream1702 · Novembro 27, 2007

Olá,

Experimente:
ul.menu li a.menu { width: 100%; }
Cumps \o/

Ok

Em que local do código?

Valew

webflex · Novembro 27, 2007

Olá,

Isso é onde você quiser, por exemplo:

ul.menubar .menuvertical
{
margin: 0px;
padding: 0px;
list-style: none;

/*border: 1px solid #ccc; */
float:left;
}

ul.menu li a.menu { width: 100%; }

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

Logicamente que tem que ser dentro do seu CSS.

Nota: Apenas testei no IE7.

Cumps \o/

dream1702 · Novembro 28, 2007

Perfeito, funcionou sim.

Só deu um probleminha, no ff ficou passando um pouco ai alterei o 100% para:

ul.menu li a.menu { width: 91%; }

Será que corro algun risco?

Muito obrigado

webflex · Novembro 28, 2007

Olá,

Penso que não, faça várias experiências ;).

Cumps \o/

dream1702 · Novembro 28, 2007

Olá,

Penso que não, faça várias experiências ;).

Cumps \o/

Ja testei em vários navegadores e está ok.

Estou encontrando um problemão no seguinte.

Não estou conseguindo separar os menus ex:

Home | Contato | Localização

Só consegui com que ficassem colados uns aos outros.

Veja o código abaixo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
/* CSS Document */


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

/* Borda  do menu */
ul.menubar .menuvertical 
{ 
   margin: 0px; 
	 padding: 0px; 
	 list-style: none; 
	 
   /*border: 1px solid #ccc; */
   float:left; 
} 


ul.menu li a.menu { width: 91%; }/* Ativando a área bloco */

ul.menubar ul.menu 
{ 
   display: none; 
   position: absolute; 
   margin: 0px; 
} 
/* Cor font do menu principal */
ul.menubar a 
{ 
   padding: 5px; 
   display:block; 
   text-decoration: none; 
   color: #555555; 
   padding: 5px; 
} 


ul.menu, 
ul.menu ul 
{ 
   margin: 0; 
   padding: 0; 
   /* Borda ultima linha do sub-menu */
   border-bottom: 1px solid #ccc; 
   width: 190px; /* Tamanho dos menus item */ 
   /* Fundo do sub-menu */
   background-color: #F7F7F7; /* IE6 Bug */ 
   opacity: .9; filter: alpha(Opacity=90); -khtml-opacity: .9;
   
} 

ul.menu li 
{ 
   position: relative; 
   list-style: none; 
   border: 0px; 
} 
  /* Bordas ultima linha do sub-menu */
ul.menu li a 
{ 
   display: block; 
   text-decoration: none; 
   border: 1px solid #EAEAEA; 
   border-bottom: 0px; 
   color: #555555; 
   padding: 5px 10px 5px 5px; 
   
} 

/* 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 */ 


/* Link a:hover */ 
ul.menu li a:hover {  background: #E3E3E3;   } 




</style>
<script type="text/javascript"> 

// Drop


function horizontal() { 

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

} 

</script> 

</head>
<body onload="horizontal();">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
	<td width="3%"> </td>
	<td width="91%">
	<ul id="barra" class="menubar"> 
				
				<li class="menuvertical style1"><a href="#">Produto A </a> </li> 
   
				<li class="menuvertical"><a href="#">Produto B </a>
				  <ul id="nav" class="menu">
			  <li><a href="#" class="menu">Produto B </a></li>
			  <li><a href="#" class="menu">Produto B </a></li>
			  <li><a href="#" class="menu">Produto B </a></li>
			  <li><a href="#" class="menu">Produto B </a></li>
			</ul>
		</li>
		<li class="menuvertical"><a href="#">Produto F </a>
			<ul id="nav" class="menu">
			 <li><a href="#" class="menu">Produto F</a></li>
			  <li><a href="#" class="menu">Produto F </a></li>
			  <li><a href="#" class="menu">Produto F</a></li>
			  <li><a href="#" class="menu">Produto F</a></li>
			  <li><a href="#" class="menu">Produto F</a></li>
			</ul>
		</li>
		<li class="menuvertical"><a href="#">Produto C </a>
			<ul id="nav" class="menu">
			  <li><a href="#" class="menu">Produto C </a></li>
			</ul>
		</li>
		<li class="menuvertical"><a href="#">Produto C  </a></li>
	   
		<li class="menuvertical"><a href="#">Produto C </a>
			<ul id="nav" class="menu">
			   <li><a href="#" class="menu">Produto C </a></li>
			  <li><a href="#" class="menu">Produto C </a></li>
			</ul>
		</li>
		</li>
	  </ul> 
   </li> 
</ul>	
			
	 </td>
	<td width="6%"> </td>
  </tr>
</table>
</body>
</html>

Gostaria de separa-los bem, pois ficaram colados.

Tentei separar colocando colunas na tabela, mas para de funcionar o menu.

Qual seria o melhor jeito?

Muito obrigado Amigão

webflex · Novembro 28, 2007

Olá,

Jogue com a propriedade do margin:

ul.menubar .menuvertical

{
margin: 0px 0px 0px 50px; /* exemplo */
padding: 0px;
list-style: none;

/*border: 1px solid #ccc; */
float:left;
}

Cumps \o/

dream1702 · Novembro 28, 2007

Olá,

Jogue com a propriedade do margin:

ul.menubar .menuvertical
{
margin: 0px 0px 0px 50px; /* exemplo */
padding: 0px;
list-style: none;

/*border: 1px solid #ccc; */
float:left;
}
Cumps \o/

webflex

MUITO OBRIGADO!

Ufff acho que consegui, não estou no serviço por isso não tenho certeza mas pelo que vi vai dar certo.

Só mais uma coisinha.

Se o meu gerente quizer que eu divida além dos espaços com aquele sinal ( | )

Produto A | Produto B | ProdutoC

O que q eu faço?

Cara, valew mesmo!!!

webflex · Novembro 28, 2007

Olá,

ul.menubar .menuvertical
{
margin: 0px 0px 0px 20px;
border-left: 1px solid #000;
padding: 0px 0px 0px 20px;
list-style: none;

/*border: 1px solid #ccc; */
float:left;
}

Experimente e abuse ;).

Cumps \o/

Arquivado

Munu dropdown nao aparece no ie6

Recommended Posts

dream1702 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

webflex 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

dream1702 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

webflex 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

dream1702 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

webflex 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

dream1702 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

webflex 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

dream1702 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

webflex 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

dream1702 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

webflex 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

dream1702 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

webflex 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

dream1702 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

webflex 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

dream1702 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

webflex 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

dream1702 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

webflex 0