Internet Explorer 7 中未显示下拉菜单答案

【问题标题】：Dropdown Menu not displayed in internet explorer 7Internet Explorer 7 中未显示下拉菜单
【发布时间】：2011-09-13 18:53:41
【问题描述】：

我有一个下拉菜单拒绝在 IE6/7 中工作

应该看起来像这样（在 Firefox 中打印）

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 下可以使用

【问题讨论】：

您能以对他人有所帮助的方式回答您自己的问题吗？如果你这样做，你可以选择你的作为正确答案。这可能看起来很奇怪，但它是处理此类情况的首选方式。

标签： css internet-explorer drop-down-menu

【解决方案1】：

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

【讨论】：

如果它在 IE8 中工作（如问题末尾所述），这（一次！）不可能是问题。

【解决方案2】：

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

使用http://peterned.home.xs4all.nl/csshover.html可以使其在IE6中工作

【讨论】：

好吧，非常感谢，但它有一个 z-index 问题：D 终于找到了：D

【解决方案3】：

解决方法：

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

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

【讨论】：