title: Nav menu sitting behind iFrame
body: <p>Specifically on IE9 only, my navigation menu is sitting behind my iframe when viewing a PDF through that iFrame. </p>
  
  <p>I have set up a jsfiddle to demonstrate:</p>
  
  <p><a href="http://jsfiddle.net/q6fmv/" rel="noreferrer">http://jsfiddle.net/q6fmv/</a></p>
  
  <p>Alternatively please see the bottom of this question for the code.</p>
  
  <p>When viewed on IE9 if you hover over the navigation elements, the ones that have a sub nav you can see are hidden behind the iFrame. </p>
  
  <p>I have tried setting the z-index of the nav menu to be higher than that of the iFrame but it didnt work. </p>
  
  <p>How can I resolve this so the sub menu of the navigatino menu appears on top of the iframe?</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="navMenu"&gt;
  &lt;ul id="menu"&gt;
      &lt;li&gt;
          &lt;a href="#"&gt;Menu 1&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Menu 2&lt;/a&gt;
  
          &lt;ul class="sub-menu"&gt;
              &lt;li&gt;
                  &lt;a href="#"&gt;Sub Menu 1&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="#"&gt;Sub Menu 2&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="#"&gt;Sub Menu 3&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="#"&gt;Sub Menu 4&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Menu 3&lt;/a&gt;
  
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Menu 4&lt;/a&gt;
  
          &lt;ul class="sub-menu"&gt;
              &lt;li&gt;
                  &lt;a href="#"&gt;Sub Menu 1&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="#"&gt;Sub Menu 2&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="#"&gt;Sub Menu 3&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="#"&gt;Sub Menu 4&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;a href="#"&gt;Menu 5&lt;/a&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;br /&gt;
  &lt;div id="iframe"&gt;
      &lt;iframe name="myiFrame" width="100%" height="100%" title="My iFrame" id="myIframe" src="http://www.education.gov.yk.ca/pdf/pdf-test.pdf" frameBorder="0"/&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>/*Initialize*/
  ul#menu, ul#menu ul.sub-menu {
      padding:0;
      margin: 0;
  }
  ul#menu li, ul#menu ul.sub-menu li {
      list-style-type: none;
      display: inline-block;
  }
  /*Link Appearance*/
  ul#menu li a, ul#menu li ul.sub-menu li a {
      text-decoration: none;
      color: #fff;
      background: #666;
      padding: 5px;
      display:inline-block;
  }
  /*Make the parent of sub-menu relative*/
  ul#menu li {
      position: relative;
  }
  /*sub menu*/
  ul#menu li ul.sub-menu {
      display:none;
      position: absolute;
      top: 30px;
      left: 0;
      width: 100px;
  }
  ul#menu li:hover ul.sub-menu {
      display:block;
  }
  </code></pre>
  
  <p>Have also tried using PDFObject.js <a href="http://jsfiddle.net/q6fmv/10/" rel="noreferrer">http://jsfiddle.net/q6fmv/10/</a>. It didnt work</p>