Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Meu menu DropDown (CSS + algum Javascript) está completamente desconfigurado no IE. Alguma coisa que o IE não entende está fazendo ele ficar muito à esquerda (desalinhado com o menu principal) e também o z-index parece não funcionar no IE (o menu foi para trás de todo o conteúdo, mesmo colocando com hack um z-index absurdo).
Qual será o problema?
Pegar o IE e jogar fora?
É o que eu gostaria, mas infelizmente não é possível contando que temos trocentos usuários (estilo usuário de posinho branco, baseado e outros) desta ferramenta de navegação da Microsoft.
Espero ter sido suficientemente clara e desculpe por manifestar a minha indignação, mas me falaram para mostrar ao mundo suas "trevas"...
Pois é...
Agradeço desde já a paciência dos senhores e senhoras por me ler.
E vou colocar abaixo a parte do código que equivale ao menu dropdown.
HTML
CODE
<div id="menudd"> <ul class="level1" id="root">
<li>
<a href="#">Calçados</a>
<ul class="level2">
<li><a href="produtos_bota.html">Bota</a></li>
<li><a href="produtos_bor.html">Chinelos de Borracha</a></li>
<li><a href="produtos_ras.html">Rasteiras</a></li>
<li><a href="produtos_lona.html">Sandálias de Lona</a></li>
</ul>
</li>
<li>
<a href="#">Bolsas</a>
<ul class="level2" style="margin-left:-82px;">
<li><a href="produtos_ensp.html">Eu Não Sou de Plástico</a></li>
<li><a href="produtos_cam.html">Camicam</a></li>
<li><a href="produtos_tira.html">Tiracolo</a></li>
<li><a href="produtos_mao.html">de Mão</a></li>
<li><a href="produtos_sho.html">Bag Shop</a></li>
<li><a href="produtos_moch.html">Mochilas e Pastas</a></li>
<li><a href="produtos_trans.html">Transversal</a></li>
<li><a href="produtos_poc.html">Pochete</a></li>
</ul>
</li>
<li>
<a href="#">Acessórios</a>
<ul class="level2" style="margin-left:-150px;">
<li><a href="produtos_cart.html">Carteiras</a></li>
</ul>
</li>
</ul>
</div>CSS
CODE
#menudd { width: 100%;
background:#f2ecd6;
padding: 0;
height: 26px;
font-family:"Trebuchet MS", Arial, sans-serif;
text-transform:uppercase;
text-decoration:none;
}#menudd ul {
display: block;
margin: 0;
padding: 0;
line-height: 18px;
list-style: none;
z-index: 350;
}#menudd ul li {
float: left;
margin: 0 3px 0 10px;
padding: 0;
font-size: 12px;
font-weight:bold;
line-height: 20px;
list-style-type: none;
}#menudd ul li a {
float: left;
display: block;
width: auto;
font-weight: normal;
background: transparent;
text-decoration: none;
color:#1f5b42;
margin: 0;
padding: 4px 8px 4px 8px;
}#menudd ul li a:hover {
background-color:#d6dbc5;
text-decoration: none;
}/ Commented Backslash Hack hides rule from IE5-Mac \/
#menudd ul li a {
float: none;
}/ End IE5-Mac hack /
#menudd ul.level2, #menudd ul.level3 {
position: absolute;
top: 0px;
left: 0px;
visibility: hidden;
border-left: 1px solid #fff;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
background-color:#d6dbc5;
}#menudd ul.level2 li, #menudd ul.level3 li {
border-bottom: 1px solid #fff;
float: none;
margin: 0;
padding: 0;
width: 150px;
height:24px;
}#menudd ul.level2 li a, #menudd ul.level3 li a {
padding: 5px 9px 5px 5px;
font-size:10px;
}#menudd ul.level2 li a:hover,#menudd ul.level3 li a:hover {
font-weight: normal;
background:#f2ecd6;
background-image: none;
}>
z-index só funicona se usar position:;
tente o uso do position tambem ;)
então... pior que eu tentei. Mas não adiantou nada. Aí eu tirei. :huh:
bom, no mínimo acho que está faltando um "display:block", para que esse menu comece a funcionar...
sempre zere as propriedades básicas dos elementos:
* {
margin: 0;
padding: 0;
list-style: none;
}(o dropdown não está rolando)
Tem como postar um link para a sua página?
>
bom, no mínimo acho que está faltando um "display:block", para que esse menu comece a funcionar...
sempre zere as propriedades básicas dos elementos:
* {
margin: 0;
padding: 0;
list-style: none;
}(o dropdown não está rolando)
Tem como postar um link para a sua página?
esqueci de colocar... tem uns javascript rolando junto.
Então, vou postar a página. Mas não me trucidem por colocar a página no ar neste estado. A culpa toda é do chefe! =P
http://www.gooc.com.br/produtos.html
http://forum.imasters.com.br/public/style_emoticons/default/blush.gif
Sua página ficou até "pesada" de tanto JS...
acho que algo mais "limpo", seria mais leve tb...
CODE
<!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">](http://www.w3.org/1999/xhtml%22)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>* {
margin: 0;
padding: 0;
list-style: none;
}body {
margin-top: 15px;
margin-left: 10px;
}ul#root {
height: 300px;
text-transform:uppercase;
background: transparent;
font-family:"Trebuchet MS", Arial, sans-serif;
}ul li {
display:block;
position: relative;
width: 75px;
padding-left: 12px;
float: left;
font-size: 12px;
color:#1f5b42;
}li ul {
position: absolute;
left: 0px; /* Set 1px less than menu width */
top: 26px;
display: none;
}/ Styles for Menu Items /
ul li a {
display: block;
text-decoration: none;
color: #777;
padding: 5px;
color:#1f5b42;
}/ Fix IE. Hide from IE Mac \/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/ End /
ul li a:hover {
background-color:#d6dbc5;
text-decoration: none;
} /* Hover Styles */li ul li a { padding: 2px 5px; } / Sub Menu Styles /
li:hover ul , li.over ul { display: block; } / The magic /
</style>
<script>
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("root");
for (i=0; i<navRoot.childNodes.length; i++) {node = navRoot.childNodes;
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace
(" over", "");
}
}
}
}
}
window.onload=startList;
</script>
</head>
*<body>*
*<div id="menudd"> *
*<ul id="root">*
* <li><a href="#">Calçados</a>*
* <ul>*
* <li><a href="produtos_bota.html">Bota</a></li>*
* <li><a href="produtos_bor.html">Chinelos de Borracha</a></li>*
* <li><a href="produtos_ras.html">Rasteiras</a></li> *
* <li><a href="produtos_lona.html">Sandálias de Lona</a></li>*
* </ul>*
* </li><!-- submenus calçados --> *
* <li><a href="#">Bolsas</a>*
* <ul>*
* <li><a href="produtos_ensp.html">Eu Não Sou de Plástico</a></li>*
* <li><a href="produtos_cam.html">Camicam</a></li>*
* <li><a href="produtos_tira.html">Tiracolo</a></li>*
* <li><a href="produtos_mao.html">de Mão</a></li>*
* <li><a href="produtos_sho.html">Bag Shop</a></li>*
* <li><a href="produtos_moch.html">Mochilas e Pastas</a></li>*
* <li><a href="produtos_trans.html">Transversal</a></li>*
* <li><a href="produtos_poc.html">Pochete</a></li>*
* </ul>*
* </li> *
* <li><a href="#">Acessórios</a>*
* <ul> *
* <li><a href="produtos_cart.html">Carteiras</a></li>*
* </ul>*
* </li> *
*</ul><!-- fecha #root -->*
*</div>*
</body>
</html>
Só adaptei um pouco ao seu caso, este tuto do Maujor:http://www.maujor.com/tutorial/ddownmenu.php
Então...
Eu escolhi não tomar como base este menu do maujor por questão de acessibilidade.
O menu do Maujor não dá pra ser acessado com o teclado.
Então vi um tutorial do bruno torres.
Adaptei para a minha situação...
estava dando vários erros aí achei mais algumas coisas que faziam o menu ficar bom.
No final só deu erro no IE.
Mas obrigada. Acho que vou tentar refazer tudo olhando direto no IE. Se programar direitinho, vai ficar om para os dois navegadores.
z-index só funicona se usar position:;
tente o uso do position tambem ;)