#menuEmpresa a, #menuProdutos a, #menuClientes a, #menuOrcamentos a, #menuLocalizacao a, #menuContato a{ display:block; width:224px; height:25px; margin-bottom:2px; text-indent:-99999px; margin-left:20px;}
#menuEmpresa a{ background:url(../imagens/menuEmpresa.jpg) no-repeat;}
#menuProdutos a{ background:url(../imagens/menuProdutos.jpg) no-repeat;}
#menuClientes a{ background:url(../imagens/menuClientes.jpg) no-repeat;}
#menuOrcamentos a{ background:url(../imagens/menuOrcamentos.jpg) no-repeat;}
#menuLocalizacao a{ background:url(../imagens/menuLocalizacao.jpg) no-repeat;}
#menuContato a{ background:url(../imagens/menuContato.jpg) no-repeat;}
#menuEmpresa a:hover{ background:url(../imagens/menuEmpresa2.jpg) no-repeat;}
#menuProdutos a:hover{ background:url(../imagens/menuProdutos2.jpg) no-repeat;}
#menuClientes a:hover{ background:url(../imagens/menuClientes2.jpg) no-repeat;}
#menuOrcamentos a:hover{ background:url(../imagens/menuOrcamentos2.jpg) no-repeat;}
#menuLocalizacao a:hover{ background:url(../imagens/menuLocalizacao2.jpg) no-repeat;}
#menuContato a:hover{ background:url(../imagens/menuContato2.jpg) no-repeat;}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{ display:none;}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{ display:block;}
#nav a{ display:block;}
#nav li{ position:relative; margin:0; padding:0;}
#nav ul { position:absolute; display:none; left:244px; *left:224px; /* IE HACK */ top:0; margin:0; padding:0; background:#FFF;}
#nav ul li ul{ left:150px; background:#FFF; margin:0; padding:0;}
#nav li ul li a{ color:#006666; width:150px; margin:0; padding:0; background:none; text-indent:0;}
#nav li ul li a:hover{ background:none;}[/codebox]
Galera, montei um drop-down em jquery, porém quando eu passo o mouse por cima de um link que tem mais estruturas dentro, ele acrescenta 4 px a mais no margin-bottom. Estou quebrando a cabeça, pq por mais q eu tire os elementos, ao passar o mouse ele sempre quebra. Quando eu tiro o mouse ele volta... no Jquery não tem nada, é bem simples a estrutura:
Update: Agora a margem é maior, depois que dei uma mexida
[codebox] <script>
function menu(){
$("#nav ul ").css({display: "none"});
$("#nav li").hover(function(){
$(this).find('ul:first').css({display: "block",display: "none"}).show(400);
},function(){
$(this).find('ul:first').css({display: "none"});
});
}
$(document).ready(function(){
menu();
});
</script>
[/codebox]
[codebox]<ul id="nav">
<li id="menuEmpresa"><a href="<?=DragoHOST;?>index.php/index/empresa">A Empresa</a></li>
<li id="menuProdutos"><a href="<?=DragoHOST;?>index.php/index/produtos">Produtos</a>
<ul>
<li>Teste</li>
<li>Teste 2
<ul>
<li>Subteste1</li>
</ul>
</li>
<li>Teste 3</li>
<li>Teste 4</li>
<li>Teste 5</li>
</ul>
</li>
<li id="menuClientes"><a href="<?=DragoHOST;?>index.php/index/clientes">Clientes</a></li>
<li id="menuOrcamentos"><a href="<?=DragoHOST;?>index.php/index/orcamentos">Orçamentos</a></li>
<li id="menuLocalizacao"><a href="<?=DragoHOST;?>index.php/index/localizacao">Localização</a></li>
<li id="menuContato"><a href="<?=DragoHOST;?>index.php/index/contato">Fale conosco</a></li>
</ul>[/codebox]
Alguem pode me ajudar a achar essa margem fantasma?
