我正在尝试实现水平多级下拉菜单.紧接着(垂直)菜单,我通过iframe嵌入了YouTube视频.如果我将鼠标悬停在Firefox中的某个主级别导航项上,则会在视频顶部显示正确的下拉菜单.
但是,在Chrome和IE9中,在菜单和iframe之间的小空间区域中只能看到下拉条的一小部分.其余部分似乎是iframe的背后.
问题似乎与YouTube视频有关,而不是 iframe.为了测试,我将iframe定位在另一个网站而不是视频,并且下拉菜单工作正常,即使在IE中也是如此.
z-index:-999 !important;
在iframe上放置了这个问题仍然会发生?是否有一些内嵌CSS,YouTube嵌入代码包含在某种程度上压倒一切?
我想要实现的是iframe定位在包含PDF文档的另一个iframe上 - 第一个iframe应该是透明的,它应该覆盖带有PDF的iframe.我需要专门用于IE(9+).
到目前为止我尝试过的代码:
<html>
<head>
<style>
</style>
</head>
<body>
<iframe src="iframeContent.html" frameborder="0" style="width: 1000px; height: 1000px; position: fixed; left:0px; top: 0px; background:transparent" allowTransparency="true"></iframe>
<iframe src='http://www.pdf995.com/samples/pdf.pdf' width="100%" height="300px" id="PDF" name="PDF"></iframe>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
iframeContent.html:
<html>
<style type="text/css">
</style>
<body style="background: transparent">
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
但是,上述方法不起作用 - iframe不透明.有谁知道如何解决这个问题?正如我在下面的评论中所说,下面发布的解决方案不适用于安装Adobe Reader DC(如果它可以工作).
我在页面中有一个对象类型标记,用于显示pdf文件.一切都运行正常,但在Internet Explorer中,我的子菜单隐藏在对象标签后面.
var objectTag = $('<object></object>')
.attr({ data: sourceURL + '#nameddest=self&page=1&view=FitV'
|| '', type: mimeType || '' })
.css({ width: '100%', height: '100%', zindex:'1' });
Run Code Online (Sandbox Code Playgroud)
请找到红色高亮区域.

我尝试了很多东西.请不要建议z-index的事情.
我有一个简单的测试,我在Bootstrap上运行,发现只在IE10中出现的问题.
如果您有一个下拉列表和一个iframe,那么点击下拉列表会在iframe下方对齐.我在这里有一个例子
我尝试过z-index百万种不同的方式.我已经在所有浏览器中测试过,只有IE10似乎有问题.
虽然我知道IE10还没有出现在Windows机器上,它即将到来,我不希望菜单失败......任何想法?
特别是在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> …Run Code Online (Sandbox Code Playgroud)