dropdown menu pushing boxs at IE

my dropdown menu is pushing all boxes included under it at IE, but at firefox is perfect. If someone can help, here is the code:
<html>
<head>
<title>Intranet</title>
<style>
.meio{
width:610px;
}
.boxSuperior2{
float:left;
width:610px;
height:50px;
margin-left: 9px;
margin-bottom: 5px;
}
.boxSuperior2 ul{
padding: 0px;
padding-top: 8px;
margin:0;
width:610px; 
height:50px;
}
.boxSuperior2 ul li{
display:inline;
margin-right: 2px;
width:150px;
padding-top:5px;
padding-bottom:5px;
float:left;
text-align:center;
font-size: 12px;
font-weight: bold;
}
.boxSuperior2 ul li a{
text-decoration:none;
}
.boxSuperior2 li ul {
bottom: 50px;
top: 0;
display: none;
width: 149px;
border-top: white 1px;
}
.boxSuperior2 li ul li ul{
position: absolute;
right: 156px;
*right:142px;
width:143px;
top: 0;
display: none;
*background:#DAE1EB;
}
.boxSuperior2 li ul li ul li{
text-align:left;
padding-left: 7px;
padding-right: -7px;
width: 143px;
border-bottom:1px dashed black;
background:#DAE1EB url(img/square.gif) no-repeat scroll left top;
}
.boxSuperior2 ul li ul li {
position: relative;
}
.boxSuperior2 li ul li{
border-bottom:1px dashed black;
text-align:left;
padding-left: 7px;
width: 143px;
background: url(img/square.gif) no-repeat scroll left top;
padding-top:1px;
*margin-right:0px;
}
#primeiroItem{
border-top:1px solid white;
margin-top:-3px;
padding-top:1px;
width: 143px;
*margin-right:0px;
}
#primeiroItemSub{
border-bottom:1px dashed black;
margin-top:-8px;
padding-top:3px;
width: 143px;
*margin-right:0px;
}
#ultimoItem{
border-bottom: none;
margin-top: 0px;
padding-bottom: 2px;
width: 143px;
*padding-bottom:5px;
}
#ultimoItemSub{
border-bottom: none;
padding-bottom: 6px;
margin-bottom:0px;
}
.boxSuperior2 li:hover ul ul,
.boxSuperior2 li.over ul ul { 
display:none;
}
.boxSuperior2 li:hover ul,
.boxSuperior2 li li:hover ul,
.boxSuperior2 li.over ul, 
.boxSuperior2 li li.over ul { 
display: block; 
} /* Aqui a magica */
.boxSuperior2 li.menuparent:hover,
.boxSuperior2 li.over { 
z-index: 9999999;
}
/* Fix IE. Hide from IE Mac \*/
* html .boxSuperior2 li { float: left; height: 1%; }
* html .boxSuperior2 li a { height: 1%; }
/* End */
#servidor {
background:#FBEEC7;
} 
#servidor li{
background:#FBEEC7 url(img/square.gif) no-repeat scroll left top; 
}
#servidor a {
color: #C77641;
}
#servicos{
background:#D4E697;
} 
#servicos li{
background:#D4E697 url(img/square.gif) no-repeat scroll left top;
}
#servicos a{
color: #547E77;
}
#sistema {
background:#F8D6C4;
} 
#sistema li{
background:#F8D6C4 url(img/square.gif) no-repeat scroll left top;
}
#sistema a{
color: #E55B6B;
}
#gestao {
background: #DAE1EB;
} 
#gestao li{
background: #DAE1EB url(img/square.gif) no-repeat scroll left top;
}
#gestao a{
color: #0081D8;
}
#servidorSub a {
color: gray;
font-size:10px;
}
.abaixo{
float:left
}
</style>
<script type="text/javascript">
over = function() {
var sfEls = document.getElementById("nav").
getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" over";
}
sfEls[i].onmouseout=function() {
this.className=this.className.
replace(new RegExp(" over\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", over);
</script></head>
<body>
<div class="meio">
<div class="boxSuperior2">
<ul id="nav">
<li id="servidor"><a href="#">servidor</a>
<ul id="servidorSub">
<li id="primeiroItem"><a href="#">Contra-cheque</a></li>
<li><a href="#">Relatório de viagens</a></li>
<li><a href="#">Diárias e passagens</a></li>
<li><a href="#">Férias</a></li>
<li><a href="#">Capacitação</a></li>
<li><a href="#">Identidade Funcional</a></li>
<li><a href="#">Boletins de serviço</a></li>
<li><a href="#">Formulários</a></li>
<li id="ultimoItem"><a href="#">Legislação</a></li>
</ul>
</li>
<li id="servicos"> <a href="#">serviços</a>
<ul id="servidorSub">
<li id="primeiroItem"><a href="#">Ar Condicionado</a></li>
<li><a href="#">Help-desk CGTI</a></li>
<li><a href="#">Correio MMA</a></li>
<li><a href="#">Bens patrimoniais</a></li>
<li><a href="#">Material de consumo</a></li>
<li><a href="#">Requisição de transporte</a></li>
<li><a href="#">Protocolo</a></li>
<li><a href="#">Serviços de reprografia</a></li>
<li><a href="#">Formulários</a></li>
<li id="ultimoItem"><a href="#">Legislação</a></li>
</ul>
</li>
<li id="sistema"><a href="#">sist. de informação</a>
<ul id="servidorSub">
<li id="primeiroItem"><a href="#">SIGEPRO</a></li>
<li><a href="#">INTERMANAGER II</a></li>
<li><a href="#">SIGMA</a></li>
<li><a href="#">GEO PROCESSAMENTO</a></li>
<li><a href="#">SIAPE-Net</a></li>
<li><a href="#">SIAFI</a></li>
<li><a href="#">SIASG</a></li>
<li><a href="#">SIGPLAN</a></li>
<li><a href="#">SIDOR</a></li>
<li id="ultimoItem"><a href="#">SIORG</a></li>
</ul>
</li>
<li id="gestao"><a href="#">gestão corporativa</a>
<ul id="servidorSub">
<li id="primeiroItem"><a href="#">Planejamento Estratégioco</a>
<ul>
<li id="primeiroItemSub"><a href="#">Acordo de Gestão</a></li>
<li id="ultimoItemSub"><a href="#">Orientação estratégica</a></li>
</ul>
</li>
<li><a href="#">Planejamento Setorial</a>
<ul>
<li id="primeiroItemSub"><a href="#">Programas do PPA 2008/2001</a></li>
<li id="ultimoItemSub"><a href="#">Espelho de Programas</a></li>
</ul>
</li>
<li><a href="#">Projeto de Cooperação Técnica</a></li>
<li><a href="#">Gestão Orçamentária e Financeira</a></li>
<li id="ultimoItem"><a href="#">Legislação</a></li>
</ul>
</li>
</ul>
</div>
<div class="abaixo">
<p> Texto Abaixo </p>
</div>
</div>
</body>
</html>
dropdown menu pushing boxs at IE

angeloz

simonuk

angeloz

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week
