Выпадающее меню не отображается в Internet Explorer 7 - PullRequest
0 голосов
/ 08 сентября 2011

У меня есть выпадающее меню, которое отказывается работать в IE6 / 7

Должно выглядеть так (печать в Firefox)

enter image description here

CSS

ul.menuSM li span {
    width: 17px;
    height: 35px;
    float: left;
        /*THIS IMAGE REPRESENTS THE RED ARROW NEXT TO THE LOGO*/
    background:url(../nImg/subnav_btn.gif) no-repeat center top;
    margin-left: 2px;
    text-indent:3000px;
}
ul.menuSM li span.subhover {
    background-position: center bottom;
    cursor: pointer;
}
/*THE DROP DOWN MENU*/
ul.menuSM li ul.submenuSM {
    list-style: none;
    position: absolute;
        /*TRIED ALSO with:  *position:fixed;  to hack ie6/7 but neither..*/
    left: 0;
    top: 32px;
    background: #333;
    margin: 0;
    padding: 0;
    display: none;
    float: left;
    width: 170px;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    border: 1px solid #111;
    z-index: 1405;
}

Исходный HTML (обратите внимание, что здесь пока нет <span>

**<ul class="menuSM">
                                <li> <a href="#"><img src="../../nImg/logoMeliaGold.png" alt="" /></a>
                                    <ul class="submenuSM">
                                        <li><a href="http://es.solmelia.com/buscar/busqueda-avanzada.htm">Reservas</a></li>
                                        <li><a href="http://es.solmelia.com/hoteles/ofertas.htm">Ofertas</a></li>
                                        <li><a href="http://es.solmelia.com/hoteles">Destinos</a></li>
                                        <li><a href="http://es.solmelia.com/hoteles/msm">Eventos y reuniones</a></li>
                                        <li><a href="http://es.solmelia.com/nFamilias/jsp/C_Home.jsp">Familias</a></li>
                                    </ul>
                                </li>
                            </ul>**

Некоторые JS, которые добавляют, потому что я не могу редактировать источник HTML: (

<script type="text/javascript"> 
$(document).ready(function(){ 
    $("ul.submenuSM").parent().append("<span></span>"); 
    /* And this shows the dropdow but i tried also setting in the CSS display:block so i don't depend of javaScript and still can't see the dropdown */ 
    $("ul.menuSM li span").click(function() {       
        $(this).parent().find("ul.submenuSM").slideDown('fast').show();  
        $(this).parent().hover(function() {
        }, function(){  
            $(this).parent().find("ul.submenuSM").slideUp('slow'); 
        }); 
        }).hover(function() { 
            $(this).addClass("subhover"); 
        }, function(){  
            $(this).removeClass("subhover"); 
    }); 
});
</script>

Финальный HTML

<ul class="menuSM">
                            <li> <a href="#"><img src="../../nImg/logoMeliaGold.png" alt="" /></a><span></span>
                                <ul class="submenuSM">
                                    <li><a href="http://es.solmelia.com/buscar/busqueda-avanzada.htm">Reservas</a></li>
                                    <li><a href="http://es.solmelia.com/hoteles/ofertas.htm">Ofertas</a></li>
                                    <li><a href="http://es.solmelia.com/hoteles">Destinos</a></li>
                                    <li><a href="http://es.solmelia.com/hoteles/msm">Eventos y reuniones</a></li>
                                    <li><a href="http://es.solmelia.com/nFamilias/jsp/C_Home.jsp">Familias</a></li>
                                </ul>
                            </li>
                        </ul>

Некоторые CSS, которые загружают стрелку

Есть идеи, что мне не хватает?

PS: работает в IE8

Ответы [ 3 ]

0 голосов
/ 08 сентября 2011

Кажется, что в вашем коде много произвольных и жестко запрограммированных чисел, возможно, вы можете попытаться перепроектировать это мое меню, которое опробовано и протестировано в IE7 + и во всех других браузерах: http://csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/

Может быть сделано для работы в IE6 с http://peterned.home.xs4all.nl/csshover.html

H

0 голосов
/ 13 сентября 2011

Решено с помощью:

*+html div{
    z-index:1400;
}
*+html .conFranjaHomeGold{
    z-index:1 !important;
}

Это была проблема другого модуля ..

0 голосов
/ 08 сентября 2011

Может быть, простое исправление, но вы объявили DOCTYPE?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...