Question

I have an embedded google calendar on a page (which is in an iframe)

I’m trying to solve this in Chrome at the moment, but I’d prefer it to work in everything.

Here’s a short summary of the general structure (actual code is more convoluted)

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

The iframe is intended to overlap the a little and appear in front of it. The drop down menu should then appear in front of the iframe. So the z-index layers should be from back to front:

1. header (just the background image is all that matters)
2. iframe
3. drop down

iframe menu

I can’t seem to make this happen. I tried being very specific using position:absolute on everything involved.

Here’s a live link to the problem page:
Edit: Removed link since it’s work related and solved

Expected menu behavior is on the homepage of that site.

Any suggestions?

Answer 1

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

The problem is that your zindex for the iframe is 1000, while your menu was z-index:1