title: z-index of drop down wont behave with iframe
body: <p>I have an embedded google calendar on a page (which is in an iframe)</p>
  
  <p>I'm trying to solve this in Chrome at the moment, but I'd prefer it to work in everything.</p>
  
  <p>Here's a short summary of the general structure (actual code is more convoluted)</p>
  
  <pre><code>&lt;header&gt;
  &lt;ul id="nav"&gt;
    &lt;li&gt;  &lt;ul class="drop_down"&gt;
              &lt;li&gt;Nav item&lt;/li&gt;
              &lt;li&gt;nav item&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;  &lt;ul class="drop_down"&gt;
              &lt;li&gt;Nav item&lt;/li&gt;
              &lt;li&gt;nav item&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/header&gt;
  &lt;iframe /&gt;
  </code></pre>
  
  <p>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:</p>
  
  <ol>
  <li>header (just the background image is all that matters)</li>
  <li>iframe</li>
  <li>drop down</li>
  </ol>
  
  <p>iframe menu</p>
  
  <p>I can't seem to make this happen. I tried being very specific using position:absolute on everything involved.</p>
  
  <p>Here's a live link to the problem page:
  <em>Edit: Removed link since it's work related and solved</em></p>
  
  <p>Expected menu behavior is on the homepage of that site.</p>
  
  <p>Any suggestions?</p>