特别是在 IE9 上,当通过 iFrame 查看 PDF 时,我的导航菜单位于 iframe 后面。
我已经设置了一个 jsfiddle 来演示:
或者请查看此问题底部的代码。
在 IE9 上查看时,如果将鼠标悬停在导航元素上,您可以看到的具有子导航的元素隐藏在 iFrame 后面。
我曾尝试将导航菜单的 z-index 设置为高于 iFrame 的 z-index,但没有成功。
如何解决这个问题,使 navigatino 菜单的子菜单出现在 iframe 的顶部?
HTML
<div id="navMenu">
<ul id="menu">
<li>
<a href="#">Menu 1</a>
</li>
<li><a href="#">Menu 2</a>
<ul class="sub-menu">
<li>
<a href="#">Sub Menu 1</a>
</li>
<li>
<a href="#">Sub Menu 2</a>
</li>
<li>
<a href="#">Sub Menu 3</a>
</li>
<li>
<a href="#">Sub Menu 4</a>
</li>
</ul>
</li>
<li><a href="#">Menu 3</a>
</li>
<li><a href="#">Menu 4</a>
<ul class="sub-menu">
<li>
<a href="#">Sub Menu 1</a>
</li>
<li>
<a href="#">Sub Menu 2</a>
</li>
<li>
<a href="#">Sub Menu 3</a>
</li>
<li>
<a href="#">Sub Menu 4</a>
</li>
</ul>
</li>
<li>
<a href="#">Menu 5</a>
</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;
}
还尝试过使用 PDFObject.js http://jsfiddle.net/q6fmv/10/ .没用
最佳答案
您是否尝试过空 iframe 技术? 之前它不起作用,因为您需要在每个子菜单 ul 标记内添加一个空的 iframe。
HTML
<div id="outer">
<div id="inner">
<div id="navMenu">
<ul id="menu">
<li>
<a href="#">Menu 1</a>
</li>
<li><a href="#">Menu 2</a>
<ul class="sub-menu">
<iframe class="cover" src="about:blank"></iframe>
<li>
<a href="#">Sub Menu 1</a>
</li>
<li>
<a href="#">Sub Menu 2</a>
</li>
<li>
<a href="#">Sub Menu 3</a>
</li>
<li>
<a href="#">Sub Menu 4</a>
</li>
</ul>
</li>
<li><a href="#">Menu 3</a>
</li>
<li><a href="#">Menu 4</a>
<ul class="sub-menu">
<iframe class="cover" src="about:blank"></iframe>
<li>
<a href="#">Sub Menu 1</a>
</li>
<li>
<a href="#">Sub Menu 2</a>
</li>
<li>
<a href="#">Sub Menu 3</a>
</li>
<li>
<a href="#">Sub Menu 4</a>
</li>
</ul>
</li>
<li>
<a href="#">Menu 5</a>
</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;
}
示例
关于html - 位于 iFrame 后面的导航菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24755631/