IE9中的菜单悬停位移 - CSS

Question

我在正在做的这个网站上悬停时遇到问题。菜单在所有页面都可以，除了主页。有点尴尬，因为我只是使用 php include 来更改内容，而页眉、菜单和页脚总是相同的。

在 Firefox 和 Chrome 中没问题，但问题是当我将鼠标悬停在 IE9 上的菜单上时，它有一个位移，就像图像一样：

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

我认为这是 display: 块的问题，但我不知道如何修复它并使菜单正常工作:(

这里是 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！）。 :-)