下拉菜单向右移动在IE7

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值。