float nested li

Question

私は垂直メニューを作成しようとしており、複数列のサブメニューを作成する必要があります。私のコードは次のようになります：

<style type="text/css" media="screen"> 


#nav { 
     width: 100px; 
    } 
    #nav li { 
     position: relative; 
     background-color: red; 
    } 
    #nav li:hover .subnav { 
     display: block; 
    } 
    .subnav { 
     position: absolute; 
     top: 0; 
     left: 100px; 
     display: none; 
    } 
    .subnav > li { 
     float: left; 
    } 
</style> 



<ul id="nav"> 
    <li> 
     <a href="#">Link 1</a> 
     <ul class="subnav"> 
      <li> 
       <ul> 
        <li>Col 1.1</li> 
        <li>Col 1.2</li> 
       </ul> 
      </li> 
      <li> 
       <ul> 
        <li>Col 2.1</li> 
        <li>Col 2.2</li> 
       </ul> 
      </li> 
      <li> 
       <ul> 
        <li>Col 3.1</li> 
        <li>Col 3.2</li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
</ul> 

私の質問は、なぜ.subnav> liは左に浮かないのですか？サブメニュー項目の長さがわからないので、width属性を設定したくありません。

Answer 1

私はそれが働いていない理由が原因CSSのこの部分であると思う：

#nav { 
    width: 100px; 
} 

これは、任意の横の部屋をサブNAV残していないので、山車のすべてが次の行に折り返さ。 #navから幅を削除すると、正しいことができるように見えます。これを行う場合は、トップレベルのメニュー項目のテキストが100ピクセルを超えないようにする必要があります。それ以外の場合、サブナビゲーションはそれをオーバーラップさせます。

（それでもIEでは動作しません）。

Answer 2

は、これは実行可能な回避策です：

.subnav ul li { 
    display: inline; 
} 

（ホバーはそれが心配だ場合はIEで動作するようには思えません）。