在IE9中菜單懸停位移 - CSS

Question

我在這個網站上懸停的問題我正在做。除家庭之外，所有頁面的菜單均可用。有點尷尬，因爲我只是使用php include來改變內容，而header，menu和footer總是一樣的。

在Firefox和Chrome也沒關係，但問題是，當我將鼠標放置在IE9菜單中有一個排量，像圖像：

例如 http://i74.photobucket.com/albums/i265/_k_ps_/exemplo.gif

我覺得它的東西與顯示：塊，但我不知道如何解決它，使正確的菜單工作:(

下面是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 { 
    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; 
} 

有人可以幫我嗎？

Answer 1

我把你的代碼（並修改了一下）在jsfiddle。

從我看到的問題來看，問題似乎與第三個元素，其中有一個孩子ul。

從我從那裏看到的，你有你的CSS問題：

這個CSS樣式

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

影響這個HTML元素：

<ul class="menu-body"> 

你可能穿上」不想要。 （fixed here）

但我不知道這是你的錯誤，你的代碼提供需要的圖像，然後我沒有他們...

而且，所有的left:0px是無用的。

如果你想要一個更好的答案，你將不得不提高你的問題（和/或jsfiddle！）。 :-)