Question

我在这个网站上悬停有问题我正在做。除家庭外，所有页面的菜单都可以。有点尴尬，因为我只是使用php include来改变内容，标题，菜单和页脚总是一样的。

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

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

我认为它与display：block有关，但我不知道如何修复它并使菜单正常工作：（

这是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中。

从我看到的问题来看，问题似乎是第3个元素，它有一个孩子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！）。的： - ）

IE9中的菜单悬停位移 - CSS

1 个答案: