Comment créer un menu déroulant plus large que son titre?

Question

Voici la structure de base de mon menu. Je ne peux pas changer ça.

<ul> 
    <li><span>Bedroom</span></li> 
    <li><span>Kitchen</span> 
     <ul> 
      <li><span>Pot</span></li> 
      <li><span>Panholder</span></li> 
     </ul> 
    </li> 
    <li><span>Garden</span></li> 
</ul> 

est ici la mise en page que je veux atteindre:

 
Bedroom | Kitchen | Garden 
     | Pot  | 
     | Panholder | 

Comme vous pouvez le voir Panholder est plus large que la cuisine. Comment puis-je déconnecter la largeur de Kitchen de la largeur de son sous-menu? (Sous-menus sont autorisés à se chevaucher, je vais cacher tous les sous-menus, mais l'actuel.

Je suis à la recherche d'une solution non-javascript. Si vous voulez l'essayer, I've put it on jsFiddle.

Answer 1

Ajoutez position: absolute à votre liste déroulante <ul>. Dans votre jsFiddle, ce serait la suivante:

body > ul > li > ul { 
    position: absolute; 
} 

Answer 2

spécifions une plus grande largeur aux éléments ul ou li imbriqués tels que:.

ul { width: 100px; } 
ul li ul { width: 200px; } 

Cela devrait rendre la ul imbriqué plus grand que son parent

en termes de CSS complet déroulant il y a beaucoup de solutions disponibles Un bon endroit pour commencer serait www.cssplay.co.uk