CSS игнорирует переполнение: скрыто

Я работаю над навигацией для этого веб-сайта, и у меня возникают проблемы с выпадающим навигатором.

В принципе, я использую overflow: hidden к контейнеру, который содержит элементы навигации, чтобы эффект опрокидывания работал должным образом (нижняя часть навигационного элемента "замаскирована" ); вы увидите, что я имею в виду, если вы перевернете навигацию на веб-сайте.

Для Продукты имеется раскрывающийся навигатор. Как сайт, встроенный в Business Catalyst (CMS), у меня нет контроля над тем, как элементы навигации вложены, но я могу, очевидно, стилизовать их/настроить для них с помощью JQuery.

Есть ли способ сделать выпадающий контейнер внутри div#navigation игнорировать правило overflow: hidden, которое я применил? Я попытался установить position на absolute и играл с z-index, но не повезло.

Любые предложения для достижения того же результата также приветствуются.

Ответ 1

overflow: hidden не может быть переопределен элементами-потомками - они всегда будут обрезаны элементом с помощью overflow: hidden.

Ответ 2

Решение: Удалите правило position:relative; из окна с помощью overflow:hidden; и установите его в одно из своих родительских полей. Тогда абсолютные поля в поле с overflow:hidden; будут игнорировать это правило. Демо: http://jsfiddle.net/88fYK/5/

Ответ 3

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

Ответ 4

если для вашего контейнера установлено значение "переполнение: скрыто"; и выпадающее меню находится под этим контейнером, вам просто нужно установить "position: absolute;"

.container {
  overflow: hidden;
}

.your_dropdown_menu {
  position: absolute;
}

Ответ 5

попытайтесь поставить позицию: зафиксировано в раскрывающемся списке.

.dropdown-content{
   position:fixed
}