float geschachtelt li

Question

Ich versuche, ein vertikales Menü zu erstellen, und ich muss ein mehrspaltiges Untermenü erstellen. Mein Code sieht so aus:

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

Meine Frage ist, warum .subnav> li nicht links schwimmen? Ich möchte das Breitenattribut nicht einstellen, weil ich nicht weiß, wie lang der Untermenüpunkt sein wird.

Answer 1

Ich denke, der Grund, warum es nicht funktioniert, weil dieser Teil des CSS ist:

#nav { 
    width: 100px; 
} 

Dies ist nicht die jeden horizontalen Raum nicht verläßt Unter nav, so dass alle von den Schwimmern in der nächsten Zeile umgebrochen . Wenn Sie die Breite aus #nav entfernen, scheint sie das Richtige zu tun. Wenn Sie dies tun, müssen Sie sicherstellen, dass der Text der obersten Menüelemente nicht länger als 100 Pixel ist. Andernfalls wird das Sub-Nav es überlappen.

(es funktioniert aber immer noch nicht im IE).

Answer 2

Ist dies eine praktikable Lösung:

.subnav ul li { 
    display: inline; 
} 

(Der schweben scheint nicht in IE zu arbeiten, wenn das ein Problem ist).