Nav menu sitting behind iFrame - html

Question

Specifically on IE9 only, my navigation menu is sitting behind my iframe when viewing a PDF through that iFrame.
I have set up a jsfiddle to demonstrate:
http://jsfiddle.net/q6fmv/
Alternatively please see the bottom of this question for the code.
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.
I have tried setting the z-index of the nav menu to be higher than that of the iFrame but it didnt work.
How can I resolve this so the sub menu of the navigatino menu appears on top of the iframe?
HTML
<div id="navMenu">
<ul id="menu">
<li>
Menu 1
</li>
<li>Menu 2
<ul class="sub-menu">
<li>
Sub Menu 1
</li>
<li>
Sub Menu 2
</li>
<li>
Sub Menu 3
</li>
<li>
Sub Menu 4
</li>
</ul>
</li>
<li>Menu 3
</li>
<li>Menu 4
<ul class="sub-menu">
<li>
Sub Menu 1
</li>
<li>
Sub Menu 2
</li>
<li>
Sub Menu 3
</li>
<li>
Sub Menu 4
</li>
</ul>
</li>
<li>
Menu 5
</li>
</ul>
</div>
<br />
<div id="iframe">
<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"/>
</div>
CSS
/*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;
}
Have also tried using PDFObject.js http://jsfiddle.net/q6fmv/10/. It didnt work

Answer 1

Have you tried the empty iframe technique ?
It was not working before because you need to add an empty iframe inside each submenu ul tag.
HTML
<div id="outer">
<div id="inner">
<div id="navMenu">
<ul id="menu">
<li>
Menu 1
</li>
<li>Menu 2
<ul class="sub-menu">
<iframe class="cover" src="about:blank"></iframe>
<li>
Sub Menu 1
</li>
<li>
Sub Menu 2
</li>
<li>
Sub Menu 3
</li>
<li>
Sub Menu 4
</li>
</ul>
</li>
<li>Menu 3
</li>
<li>Menu 4
<ul class="sub-menu">
<iframe class="cover" src="about:blank"></iframe>
<li>
Sub Menu 1
</li>
<li>
Sub Menu 2
</li>
<li>
Sub Menu 3
</li>
<li>
Sub Menu 4
</li>
</ul>
</li>
<li>
Menu 5
</li>
</ul>
</div>
CSS
#outer {
position: relative;
left:0;
top: 0;
width: 100%;
z-index: 3;
}
#inner{
background: red;
}
.cover {
position: absolute;
border: none;
top: 0;
left: 0;
width: 100%;
z-index: -2;
height:100%;
}
#pdf {
position: relative;
top:0;
z-index: 1;
}
ul#menu, ul#menu ul.sub-menu {
padding:0;
margin: 0;
z-index:3;
}
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;
z-index:3;
}
ul#menu li:hover ul.sub-menu {
display:block;
position:absolute;
z-index:3;
}
EXAMPLE
http://jsfiddle.net/gDuCE/701/

Answer 2

I have used google docs code for embedding via iframe to the website.
I have added jsfiddle link which you can directly check in ie9.
JSFiddle code
JSFiddle fullscreen code - check this directly in ie9
If you are using google documents as iframe, then please do make sure that it is shared publicly.
<div id="navMenu">
<ul id="menu">
<li>
Menu 1
</li>
<li>Menu 2
<ul class="sub-menu">
<li>
Sub Menu 1
</li>
<li>
Sub Menu 2
</li>
<li>
Sub Menu 3
</li>
<li>
Sub Menu 4
</li>
</ul>
</li>
<li>Menu 3
</li>
<li>Menu 4
<ul class="sub-menu">
<li>
Sub Menu 1
</li>
<li>
Sub Menu 2
</li>
<li>
Sub Menu 3
</li>
<li>
Sub Menu 4
</li>
</ul>
</li>
<li>
Menu 5
</li>
</ul>
</div>
<br />
<div id="iframe">
<!--<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"/>-->
<iframe src="https://docs.google.com/file/d/0ByF4RjDx3q6sMW9DWHR0MXNtN0k/preview" width="100%" height="100%"></iframe>
</div>
Regards D.

Answer 3

Try adding position and z-index to #menu or #navMenu as such
ul#menu {
position: relative;
z-index: 9999;
}
http://jsfiddle.net/q6fmv/7/
I don't have IE9 to check though