Question

我有一个拒绝在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

Answer 1

也许是一个简单的修复，但是，你宣布了DOCTYPE吗？

Answer 2

您的代码中似乎有很多任意和硬编码的数字，也许您可以尝试对我在IE7 +和所有其他浏览器中尝试和测试过的菜单进行逆向工程：http://csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/

可以使用http://peterned.home.xs4all.nl/csshover.html

在IE6中工作

ħ

Answer 3

解决：

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

这是另一个模块的问题..

下拉菜单未在Internet Explorer 7中显示

3 个答案: