float imbriqué li

Question

J'essaie de créer un menu vertical et j'ai besoin de faire un sous-menu multicolonne. Mon code ressemble à ceci:

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

Ma question est de savoir pourquoi .subnav> li ne flotte pas à gauche? Je ne veux pas définir l'attribut de largeur, car je ne sais pas combien de temps l'élément de sous-menu sera.

Answer 1

Je pense que la raison pour laquelle il ne fonctionne pas est à cause de cette partie du CSS:

#nav { 
    width: 100px; 
} 

Cela ne laisse pas le sous-nav une pièce horizontale, de sorte que tous les flotteurs wrap à la ligne suivante . Supprimer la largeur de #nav apparaît pour laisser faire la bonne chose. Si vous faites cela, vous devrez vous assurer que le texte des éléments de menu de niveau supérieur ne dépasse pas 100 pixels; sinon, le sous-nav le chevauchera.

(il ne fonctionne toujours pas dans IE, cependant).

Answer 2

Est-ce une solution viable:

.subnav ul li { 
    display: inline; 
} 

(Le vol stationnaire ne semble pas fonctionner dans IE si c'est une préoccupation).