Menu dropdown não funciona no IE

[TiagoMaker 3]

Dae galera, fiz um menu pro meu site, onde a parte de 'links' abre uma div abaixo com outros links, no chrome e firefox funciona bem, mas no IE não aparece. Se puderem me dar uma ajuda.

 

<div class="menu">
<ul class="itens">
<a href="index.php"><li>Principal</li></a>
<a href="?pag=revendas"><li>Revendas</li></a>
<a href="?pag=guia_comercial"><li>Guia Comercial</li></a>
<a href="?pag=como_anunciar"><li>Como Anunciar</li></a>
<a href="index.html"><li>Contatos</li></a>
<li class="sub-menu">Links
<ul class="nav">
<li><a href="http://www.fipe.org.br/web/index.asp?aspx=/web/indices/veiculos/introducao.aspx" target="_blank">Tabela Fipe</a></li>
<li><a href="http://www.detran.rs.gov.br/" target="_blank">Detran RS</a></li>
</ul>
</li>
</ul>
</div><!--menu -->

 

css

.menu {
color:#FFF;
padding:0px;
margin:0 auto;
width:100%;
height:52px;
border-top: 1px solid #4b4f54;
background-color: #2f3134;
background-image: -moz-linear-gradient(top, #393c40, #1f2022);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#393c40), to(#1f2022));
background-image: -webkit-linear-gradient(top, #393c40, #1f2022);
background-image: -o-linear-gradient(top, #393c40, #1f2022);
background-image: linear-gradient(to bottom, #393c40, #1f2022);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff393c40', endColorstr='#ff1f2022', GradientType=0);
}
.menu ul {
cursor:pointer;
height:52px;
padding:0px;
margin:0 auto;
}
.menu li {
border-right:1px solid #000;
height:22px;
display: block;
text-align: center;
position: relative;
font-size: 17px;
padding: 14px 19px 16px 19px;
margin: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
float:left;
text-transform:uppercase;
list-style:none;
}
.menu li a {
color:#FFF;
}
.menu li:hover,
.menu li.active,
.menu li.active:hover {
color:#FFF;
background-color: #d90e2b;
background-image: -moz-linear-gradient(top, #eb0e31, #bd0d23);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#eb0e31), to(#bd0d23));
background-image: -webkit-linear-gradient(top, #eb0e31, #bd0d23);
background-image: -o-linear-gradient(top, #eb0e31, #bd0d23);
background-image: linear-gradient(to bottom, #eb0e31, #bd0d23);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffeb0e31', endColorstr='#ffbd0d23', GradientType=0);
}
.menu .sub-menu {
background: url(../imagens/indicator.png) 50% 90% no-repeat;
width:100px;
z-index:2;
}
.menu .sub-menu:hover {
background: url(../imagens/indicator.png) 50% 90% no-repeat;
background-color: #d90e2b;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffeb0e31', endColorstr='#ffbd0d23', GradientType=0);
}
.menu .sub-menu li {
text-align:left;
font-size:14px;
border-top: 1px solid #383b3f;
left:0;
background-color:#222529;
padding:5px;
padding-left:20px;
float:left;
border-right:0;
width:150px;
}
.nav ul {
left:0;
}
.nav li ul {
position:absolute;
display:none;
margin-top:13px;
}
.nav li:hover ul { 
display:block;
margin-top:13px;
}

[Diéssica 140]

Qual versão do IE?

Testei no IE 8 e funcionou perfeitamente. Se está trabalhando com CSS3, não se preocupe em fazer funcionar no IE 7 ou inferior.

[William Bruno 1501]

Para ie6 e ie7, vc precisa utilizar javascript, pois estes não reconhecem o :hover na tag LI por exemplo.

 

http://maujor.com/tutorial/ddownmenu.php