Я знаю, смутное название, но трудно описать то, что я хочу, в одном предложении.
Моя проблема заключается в следующем, у меня есть шаблон с несколькими раскрывающимися меню, активированными 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, а элементы списка слишком длинные, список попадает под правую границу оболочки, что делает его частично невидимым.
Переполнение: авто дает оболочке полосу прокрутки, которая является нежелательной. Переполнение: visible решает проблему, но делает обертку без высоты, поэтому цвет фона и границы не видны, что является частью его функции, так что это тоже не помогает.
Чтобы не заключать в кавычки большую группу кода, живой пример можно увидеть на http://www.pkr.nl/template/forumdisplay.html
Кто-нибудь знает решение, которое заставит меню либо показываться за пределами оболочки, либо заставит их выровняться с правильным образом?