Deslocamento de hover no IE

[_cah_ 0]

Bom dia :-)

 

Eu estou fazendo o site de uma empresa e estou tendo alguns problemas de renderização no IE. A maioria deles já consegui resolver, mas o menu tá me dando mais trabalho. Acontece que tudo funciona bem no Firefox e no Chrome, mas no IE9 o menu hover tá com um deslocamento que não deveria ter. O estranho é que isso só acontece na página principal. Todas as outras estão normais, mas na verdade em todas as "páginas" o menu é o mesmo, pois estou usando include pra trocar o conteúdo do meio da página.

 

Pelo que eu pesquisei por aí, parece que pode ser um problema com display: block. Mas testei as alterações e nada funcionou. Se alguém puder me ajudar, obrigada :-)

 

O menu está assim no IE:

 

E deve ficar assim:

 

Segue o código:

 

HTML

<div id="menu" class="group">
<ul>
<li id="menu-01"><a href="indexteste.php?page=home" title="Página Inicial"><span>Home</span></a></li>

<li id="menu-02"><a href="indexteste.php?page=empresa" title="Conheça a PROEL"><span>A Empresa</span></a></li>

<li id="menu-03"><a href="galeria_representacao.php?image=0">
<img src="images/representacao.jpg" class="menu-head" onMouseOver="this.src='images/representacao-hover.jpg'" onMouseOut="this.src='images/representacao.jpg'"></a>  
	<ul class="menu-body">
		<li><a href="indexteste.php?page=home">Teste1</a></li>
		<li><a href="galeria_representacao.php?image=0">Teste2</a></li>
		<li><a href="#">Teste3</a></li>
		<li><a href="#">Teste4</a></li>
		<li><a href="#">Teste5</a></li>   
	</ul>
</li> 

<li id="menu-04"><a href="indexteste.php?page=servicos" title="Serviços"><span>Serviços</span></a></li>

<li id="menu-05"><a href="indexteste.php?page=projetos" title="Projetos"><span>Projetos</span></a></li>

<li id="menu-06"><a href="indexteste.php?page=novidades" title="Notícias e Novidades"><span>Novidades</span></a></li>

<li id="menu-07"><a href="indexteste.php?page=contato" title="Entre em contato"><span>Contato</span></a></li>				

<li id="menu-08"><a href="#" title="E-mail"><span>E-mail</span></a></li>

<li id="menu-09"><a href="#" title="Login"><span>Login</span></a></li>

</ul>

</div>

 

 

CSS

/* Menu */

#menu {
width: 834px;
height: 44px;
background-image: url(../images/menu-up.jpg);
display: block;
}

#menu ul {
width: 834px;
height: 44px;
list-style: none;
margin: 0;
padding: 0;
float: left;
position: absolute;
}

#menu ul span {
display: none;
}

#menu ul li {	
list-style: none;
display: block;
float: left;
position: relative;
}

#menu li ul {
position: absolute;
display: none;
z-index: 12;
}

#menu li ul li {
clear: both;
position: relative;
margin: 0;
padding: 0;
background-color: #0676c4;
width: 157px;
height: 40px;
font-family: Helvetica, Verdana, sans-serif;
font-size: 14px;
}

#menu li ul li a {
clear: both;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
padding: 10px;
margin: 0;
display: block;
}

#menu li ul li a:hover {	
background-color: #87c5f1;
height: 20px;
margin: 0;	
} 

#menu ul li, #menu ul a {
margin: 0;
padding: 0;
text-decoration: none;
height: 44px;
display: block;
}

#menu-01 {
left: 0px;
width: 75px;
}

#menu-01 a:hover {
background-image: url(../images/menu-down.png);
}

#menu-02 {
left: 0px;
width: 112px;
}

#menu-02 a:hover {
background: url(../images/menu-down.png) -75px;
}

#menu-03 {
background-image: url(../images/representacao.jpg);
left: 0px;
width: 157px;
z-index: 11;
border: 0;
}

#menu-04 {
left: 0px; 
width: 103px;
}

#menu-04 a:hover {
background: url(../images/menu-down.png) -344px;
}

#menu-05 {
left: 0px;
width: 108px;
}

#menu-05 a:hover {
background: url(../images/menu-down.png) -447px;
}

#menu-06 {
left: 0px;
width: 113px;
}

#menu-06 a:hover {
background: url(../images/menu-down.png) -555px;
}

#menu-07 {	
left: 0px;
width: 101px;
}

#menu-07 a:hover {
background: url(../images/menu-down.png) -668px;
}

.menu-head {
border-width: 0;
}

[_cah_ 0]

Só pra avisar que já resolvi o problema. Era um bug estranho do IE9: link

 

Coloquei essa tag pra emular o IE7 e agora funciona direitinho:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, IE=9" />