Take the tour ×  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)  <ul id="nav">   <li>  <ul class="drop_down">
<li>Nav item</li>             <li>nav item</li>     <li>  <ul
class="drop_down">             <li>Nav item</li>
<li>nav item</li> <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.