Смещение меню в IE9 - CSS - PullRequest
Новая
       33

Смещение меню в IE9 - CSS

1 голос
/ 05 октября 2011

У меня проблема с hover на этом сайте, который я делаю.Меню в порядке на всех страницах, кроме дома.Что неудобно, потому что я просто использую php include для изменения содержимого, а верхний и нижний колонтитулы всегда одинаковы.

В Firefox и Chrome все в порядке, но проблема в том, что при наведении мыши на меню в IE9 появляется смещение, подобное изображению:

пример example 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;
}

Может кто-нибудь мне помочь?

1 Ответ

0 голосов
/ 05 октября 2011

Я поместил ваш код (и немного его изменил) в 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">

Что вы, вероятно, не хотите. ( исправлено здесь )

Но я не уверен, что это ваша ошибка, предоставленный вами код нуждается в изображениях, а у меня их нет ...

Кроме того, все ваши left:0px бесполезны.

Если вы хотите получить лучший ответ, вам придется усилить свой вопрос (и / или jsfiddle!). : -)

...