Z-индекс выпадающего не будет вести себя с iframe

Question

У меня есть встроенный календарь Google на странице (который находится в iframe)

Я сейчас пытаюсь решить эту проблему в Chrome, но я бы предпочел, чтобы он работал во всем.

Вот краткое резюме общей структуры (фактический код более запутанный)

<header>
<ul id="nav">
  <li>  <ul class="drop_down">
            <li>Nav item</li>
            <li>nav item</li>
        </ul>
    </li>
    <li>  <ul class="drop_down">
            <li>Nav item</li>
            <li>nav item</li>
        </ul>
    </li>
</ul>
</header>
<iframe />

iframe предназначен для того, чтобы немного перекрывать и появляться перед ним.Выпадающее меню должно появиться перед iframe.Таким образом, слои z-index должны быть сзади вперед:

1. заголовок (только фоновое изображение - это все, что имеет значение)
2. iframe
3. раскрывающийся список

меню iframe

Кажется, я не могу этого добиться.Я пытался быть очень конкретным, используя положение: абсолютное во всех аспектах.

Вот прямая ссылка на страницу проблемы: Редактировать: Удалена ссылка, поскольку она связана с работой и решена

Ожидаемое поведение меню на главной странице этого сайта.

Есть предложения?

Answer 1

Take z-index:1 off #header
Set #nav li ul z-index:100
Set the iframe z-index:50

Проблема в том, что ваш zindex для iframe равен 1000, а ваше меню было z-index: 1