Question

我知道这可能已经得到了回答，但我无法轻易找到关于IE7与下拉菜单兼容性的众多其他投诉。基本上，我通过一个教程来制作一个基本的下拉菜单。除IE7外，在其他浏览器中工作正常。而不是在选项卡下面的菜单项，我得到这样的东西：

Web Picture http://akasuna.com/00000/Twentyten_ie7_bug.jpg

当然，这与我正在处理的网页不一样，但我实际上并没有在互联网上使用它，而且这张图片代表了我遇到的完全相同的问题。

CSS：

@charset "utf-8";

#main{
    width: 730px;
    margin-left: auto;
    margin-right: auto;
}

#regList{
    list-style-image:url(expbul1a.gif);
    font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
}

#navMenu{
    margin:0;
    padding:0;
}

#navMenu ul{
    margin:0;
    padding:0;
}

#navMenu li{
    margin:0;
    padding:0;
    list-style:none;
    float:left;
    position:relative;
}

#navMenu ul li a{
}

#navMenu ul ul{
    position:absolute;
    visibility:hidden;
    top:50px;
}

#navMenu ul li:hover ul{
    visibility:visible;
}

/**********************************************************/

#navMenu li:hover{
}

#navMenu ul li:hover ul li a:hover{
}

#navMenu a:hover{
}

.clearFloat{
    clear:both;
    margin:0;
    padding:0;
}

HTML：

<div id="navMenu">

    <ul>
        <li><a href="SBartletHomepageHTML.html"><img src="home_cmp_expeditn010_hbtn.gif"/></a></li><!--home header-->
    </ul>

    <ul>
        <li><a hrer=""><img src="Books.htm_cmp_expeditn010_hbtn.gif"/></a>
            <ul>
                <li><a href="Normality is Not Mental Health.htm"><img src="Images/Normality is not Mental Health.gif"/></a></li>
                <li><a href="Conceptual Therapy.html"><img src="conceptual therapy.htm_cmp_expeditn010_hbtn.gif"/></a></li>
                <li><a href="Reflexivity.html"><img src="reflexivity.htm_cmp_expeditn010_hbtn.gif"/></a></li>
                <li><a href="Human Pathology.html"><img src="human pathology.htm_cmp_expeditn010_hbtn.gif"/></a></li>
                <li><a href="Critique.html"><img src="Critique of Normality.htm_cmp_expeditn010_hbtn.gif"/></a></li>
                <li><a href="Logic.html"><img src="Logic.htm_cmp_expeditn010_hbtn.gif"/></a></li>
                <li><a href="When You Dont Know.html"><img src="When You Don't Know Where to Turn.htm_cmp_expeditn010_hbtn.gif"/></a></li>
            </ul>

        </li>
    </ul>

    <ul>
        <li><a hrer=""><img src="PSYCHOLOGY.htm_cmp_expeditn010_hbtn.gif"/></a>
            <ul>
                <li><a href="PsychEd.html"><img src="PsychEd.htm_cmp_expeditn010_hbtn.gif"/></a></li>
                <li><a href="Animal Rights.html"><img src="Animal Rights.htm_cmp_expeditn010_hbtn.gif"/></a></li>
                <li><a href="Effectiveness.html"><img src="Effectiveness.htm_cmp_expeditn010_hbtn.gif"/></a></li>
                <li><a href="Limitations.html"><img src="Limitations.htm_cmp_expeditn010_hbtn.gif"/></a></li>
            </ul>
        </li>
    </ul>

    <ul>
        <li><a hrer=""><img src="PHILOSOPHY.htm_cmp_expeditn010_hbtn.gif"/></a>
            <ul>
                <li><a href="Metalogic.html"><img src="MoR.htm_cmp_expeditn010_hbtn.gif"/></a></li>
            </ul>
        </li>
    </ul>

    <ul>
        <li><a hrer=""><img src="LITERARY.htm_cmp_expeditn010_hbtn.gif"/></a>
            <ul>
                <li><a href="Sapphos Journal.html"><img src="Sappho's Journal.htm_cmp_expeditn010_hbtn.gif"/></a></li>
                <li><a href="Christs Journal.html"><img src="Christ's Journal.htm_cmp_expeditn010_hbtn.gif"/></a></li>
                <li><a href="Voices.html"><img src="Voices.htm_cmp_expeditn010_hbtn.gif"/></a></li>
            </ul>
        </li>
    </ul>

Answer 1

请确保无论何时使用position:absolute，您都会同时提供top和left（或bottom和right）。否则浏览器会猜测，而且他们是可怕的猜测者。例如，在您的情况下，我注意到#navMenu ul ul没有left值。

下拉菜单在IE7中向右移动

1 个答案: