IE7の右側にドロップダウンメニューが移動する

Question

IE7のドロップダウンメニューとの互換性に関する他の多くの苦情の中で、これは簡単にはわかりません。基本的には、基本的なドロップダウンメニューを作成するチュートリアルに進みました。 IE7を除く他のブラウザで正常に動作します。代わりに右のタブの下にドロップしたメニュー項目の、私はこのような何かを得る：確か

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

を、これは私が働いているものと同じWebページではありませんが、私は実際にはありませんそれはインターネット上にあり、この写真は私が持っているのとまったく同じ問題を表しています。

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の値がないことに気付きました。