Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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
* {
margin: 0;
padding: 0;
}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 a{
color:#FF0000;
}#menu ul, #menu li{
list-style:none;
text-align:center;
padding:0;
margin:0;#menu li{
float:left;
width:190px;
line-height:20px;#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;#menu a{
font-weight:bold;
color:#000000;#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>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.
>
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
É 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...