Выпадающее меню CSS - порядок стека не так?

Question

Наш тестовый сервер находится здесь:

http://208.43.52.30/event/list

См. Справа вверху поле с надписью "Организаторы" ..

По какой-то причине я могу 'Вы не можете получить выпадающий список на верхнем слое ... Я пытался изменить положение, я пытался изменить z-index, но безуспешно ..

Есть идеи?

Answer 1

Ваш div.header-holder имеет overflow: hidden, если вы измените это, список организаторов должен отображаться без проблем. Отредактировано в ответ на комментарий ОП:

Они на самом деле закрыты этими изображениями, и у них нет переполнения: скрыто применено ...

Вы можете обнаружить, что применение position:absolute; к раскрывающемуся списку ul (и position: relative к его родительскому элементу li) должно решить эту проблему, вынув его из обычного потока документов и сделав егосидеть над другими элементами, не являющимися absolute.

Конечно, поскольку «эти» изображения являются частью карусели / слайд-шоу и расположены также absolute, они могут не изначально показывать 'над ними.В этом случае стоит указать z-index для изображений слайд-шоу и убедиться, что z-index раскрывающегося списка выше, чем для изображений.

Answer 2

В вашем div элементе с идентификатором "header-holder" у вас есть CSS overflow значения hidden.Поскольку список организаторов является дочерним для этого, он не будет отображаться за пределами этого div.Избавься от них, и ты в порядке.

Answer 3

Вам необходимо внести изменения в различные значения.Добавьте эти правила CSS:

.header-holder { overflow: visible; z-index: 300; }
#visual-box { z-index: 300; }
.box-info { z-index: 301; }
.box-info ul.dropdown { z-index: 301; }

Answer 4

В блоке css для # visual-box измените z-index на 0, а в блоке для .header-holder измените z-index на 1 и переполните до видимого