Positionnement du menu déroulant CSS à l'intérieur d'un wrapper avec débordement caché

Question

Je sais, un titre vague mais difficile de décrire ce que je veux en une phrase.

Mon problème est le suivant, j'ai un modèle avec plusieurs menus déroulants activés par jQuery. Les listes déroulantes apparaissent en tant que deuxième éléments de navigation de niveau au sein d'une liste de premier niveau, comme suit:

<ul class="tools"> 
    <li class="dropdown"> 
    <a href="#">Tools</a> 
    <ul class="submenu"> 
     <li><a href="/">Option 1</a></li> 
     <li><a href="/">Option 2</a></li> 
     <li><a href="/">Option 3</a></li> 
    </ul> 
    </li> 
    <li><a href="/">More</a></li> 
</ul> 

Le sous-menu est masqué par défaut et peuvent être affichés en cliquant sur l'élément de liste auquel il appartient (dans ce cas 'outils'). Le sous-menu est positionné de manière absolue, de sorte que lorsqu'il est affiché, il est toujours juste en dessous du lien cliqué. Tout cela fonctionne parfaitement bien.

Le problème est que tout ceci est enveloppé dans un div qui a un débordement: caché. Lorsque le sous-menu est trop proche du côté droit de cette div, et que les éléments de la liste sont trop longs, la liste tombe sous la bordure droite de l'enveloppe, la rendant partiellement invisible. Dépassement: auto donne à l'encapsuleur une barre de défilement qui n'est pas désirée. Overflow: visible résout le problème, mais rend l'encapsuleur sans hauteur, de sorte que la couleur de l'arrière-plan et les bordures ne sont pas visibles, ce qui fait partie de sa fonction, donc cela n'aide pas non plus.

ne pas avoir à citer un grand tas de code, un exemple vivant peut être vu sur http://www.pkr.nl/template/forumdisplay.html

Quelqu'un sait-il une solution qui fera les menus soit spectacle en dehors de l'emballage, ou qui les rend aligner à c'est juste d'une manière décente?

Answer 1

Y at-il une raison pour laquelle vous flottez #container .column gauche?

Si vous supprimez le flotteur, puis supprimez overflow:hidden de #container, votre menu s'affiche.