要素を絶対配置すると、要素がインラインでIEに表示される

主要素を縦に整列させ、それぞれの下位要素を主要素の下にドロップしたいというリストがあります。私は位置を保持したい：このnavの幅はそれぞれから異なるので、私は幅を設定することはできませんので、subNavクラスの絶対。これはFirefoxで動作しますが、IE 7では絶対にサブナフがインラインで表示されます（右にシフトして、私が望む場所から上に移動します）。これをどうすれば解決できますか？要素を絶対配置すると、要素がインラインでIEに表示される

例：

<style> 
#nav ul, #nav li ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
} 
#nav li { 
    float: left;  
    width: 120px; 
    border-right: 1px solid #000; 
    padding: 10px; 
} 
#nav li ul li { 
    float: none;  
    width: auto; 
    height: auto; 
    border-right: none; 
    text-align: left; 
    padding: 0; 
} 

#nav .subNav { 
    background: #eee; 
    position: absolute; 
    padding: 10px; 
} 
</style> 
</head> 

<body> 
<div id="nav"> 
    <ul> 
    <li>Main One     
      <ul class="subNav"> 
     <li>Sub One A</li> 
     <li>Sub One B</li> 
     </ul>   
    </li> 
    <li>Main Two  
     <ul class="subNav"> 
     <li>Sub Two A</li> 
     <li>Sub Two B</li> 
     </ul> 
    </li> 
    </ul> 
</div> 
</body>

出典

2009-08-17 Anonymous

が上位と左の値に置くことを忘れないでください。

nav .subNav{ 
    top:10px; 
    left:20px; 
} 

nav.containerDiv { 
    position:relative; 
}

HTML

<ul class="nav"> 
    <li> 
     <div class="containerDiv"> 
     <ul class="subNav">... 
     </div> 
    </li> 
</ul>

これはsubNavではなく、文書全体のコンテナのdivに相対であることになります。

出典

2009-08-17 19:18:38 Zoidberg

絶対配置を持つsubNavに左の位置を置くと、すべてのsubNav項目が、私が望ましくない場所に垂直に表示されます。私はそれらをメインアイテムの相手の直下に表示したい。 –

次に、divをサブナビゲーションリストの周りに置き、そのdivに相対位置があるようにします。 position：relative; サブナビのdivがそのdivの内側にあることを確認してください。 cssが行うことは、相対位置または絶対位置（この場合は新しいdiv）の最初の親要素への絶対位置付けを行うことです。これを表示するように回答を編集します – Zoidberg

要素を絶対配置すると、要素がインラインでIEに表示される

答えて

関連する問題