CSS dropdown-menu позиционирование внутри обертки со скрытым переполнением

Question

Я знаю, неопределенное название, но трудно описать, что я хочу в одном предложении.

Моя проблема заключается в следующем. У меня есть шаблон с несколькими раскрывающимися меню, активированными jQuery. В выпадающих списках появляются как второго уровня навигационных элементов в списке первого уровня, следующим образом:

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

Подменю скрыты по умолчанию, и можно показать, нажав на элемент списка он принадлежит (в этом случае 'инструменты'). Подменю позиционируется как абсолютное, так что, когда он показывает, он всегда находится чуть ниже щелкнутой ссылки. Все это прекрасно работает.

Проблема в том, что все это завернуто в div, у которого есть переполнение: скрыто. Когда подменю находится слишком близко к правой стороне этого div, а элементы списка слишком длинны, список попадает под правую границу обертки, делая ее частично невидимой. Overflow: auto дает оболочке полосу прокрутки, которая нежелательна. Переполнение: видимое решает проблему, но делает оболочку не такой высоты, чтобы цвет фона и границы не были видны, что является частью его функции, так что это тоже не помогает.

Чтобы не цитировать большую кучу кода, живой пример можно увидеть на http://www.pkr.nl/template/forumdisplay.html

Кто-нибудь знает решение, которое заставит меню либо показать вне оболочки, или что делает их выровнять по это правильно в приличном ключе?

Answer 1

Есть ли причина, по которой вы плаваете #container .column слева?

Если вы удалите поплавок, а затем удалите overflow:hidden от #container, появится ваше меню.