[Resolvido] erro menu vertical no ie7 e ie8

[DeividMG18 3]

galera fiz esse menu vertical com css e jquery e funciona em todos navegadores atuais,porem no ie6,ie7 e ie8 ele mostra o menu bem distante. alguem sabe em qual propriedade deve se mexer para corrigir isso?

 

segue o link

[Gerciley 14]

É importante definir o position das LIs visiveis como Relative e as ULs (Submenus) que ficam com display hidden como Absolute, isso é importante para orientar o navegador onde vai ser a base de inicio para calcular a posição. verifique isso e se continuar poste o código ai que fica mais fácil.

Abraços...

[Layo 10]

* {
margin: 0;
padding: 0;
}

[DeividMG18 3]

nao mudou nada

 

 

ja fiz isso..segue o codigo

 

<style>
* {
margin: 0;
padding: 0;
}

#menu{
height:20px;
position:relative;
text-align:center;
color:#000000;
font-weight:bold;
font-size:14px;
margin:0 auto;
}
#menu li:hover{

}

#menu li:hover a{
color:#FF0000;
}

#menu ul, #menu li{
list-style:none;
text-align:center;
padding:0;
margin:0;
z-index:100}

#menu li{

float:left;
width:190px;
line-height:20px;
position:relative;}



#menu li ul{
display:none;
position:absolute;

}


#menu li ul li a:hover{
color:#000000;
}

#menu li ul li a{
color:#FF0000;
}


#menu li li{
width:190px;
text-align:center;
line-height:20px;
float:none;
position:relative}

#menu a{
font-weight:bold;
color:#000000;
text-decoration:none}



#menu a:hover{
text-decoration:none}	

</style>
<script type='text/javascript' src="js/jquery.js"></script>
<script>jQuery(document).ready(function() {  
jQuery("#menu li").hover(function(){
	jQuery(this).children(":hidden").slideDown();
	 }, function(){
		 jQuery(this).parent().find("ul").slideUp();

		 })	;

});</script>
<div id='menu' >
 <ul>
   <li><a href="index.php">Pagina Inicial</a></li>
   <li><a href="#">Intitucional</a>
       <ul>
         <li><a href="#">História</a></li>
         <li><a href="#">Missão</a></li>
         <li><a href="#">Diretoria</a></li>
       </ul>
   </li>
   <li><a href="#">Lojas</a>
       <ul>
         <li><a href="#">Matriz</a></li>
         <li><a href="#">Max</a></li>
         <li><a href="#">Mix</a></li>
         <li><a href="#">Oliveira</a></li>
       </ul>
   </li>
   <li><a href="encarte.php">Encarte</a>
       <ul>
         <li><a href="encarte.php">Da Semana</a></li>
       </ul>
   </li>
   <li><a href="#">Atendimento</a>
       <ul>
         <li><a href="#">Suporte Online</a></li>
         <li><a href="#">Contatos</a></li>
         <li><a href="#">Enviar Email</a></li>
       </ul>
   </li>
 </ul>
</div>

[Gerciley 14]

altere o CSS #menu li ul adicione um top de +- 25px e instancie a propriedade left = 0; vai ficar assim;

#menu li ul{
display:none;
position:absolute;
top:25px;
left:0;

}

os navegadores de verdade reconhece essa propriedade por padrão como zero mas a porcaria do IE exige que se instancie, testei aki e funcionou... Abraços, espero ter ajudado.

[DeividMG18 3]

altere o CSS #menu li ul adicione um top de +- 25px e instancie a propriedade left = 0; vai ficar assim;

#menu li ul{
display:none;
position:absolute;
top:25px;
left:0;

}

os navegadores de verdade reconhece essa propriedade por padrão como zero mas a porcaria do IE exige que se instancie, testei aki e funcionou... Abraços, espero ter ajudado.

 

deu certo vlw