jquery - 当鼠标悬停在 YouTube 视频中时，我的 megamenu 在 IE9 中崩溃了

Question

当我将鼠标悬停在大型菜单视频中时，整个大型菜单就会崩溃。这种情况仅发生在 IE9 中

这是我的代码:

<nav class="menu">
<ul>
<li><a href="#">Menu image 01</a></li>
<li><a href="#">Menu image 02</a>
 <div class="megamenu ">
 <h3 class="title">Youtube Video</h3>
 <iframe width="200" height="250" src="https://www.youtube.com/embed/_1lJZfZr0lI" frameborder="0" wmode="transparent" allowfullscreen></iframe>
 </div>
</li>
<li><a href="#">Menu image 03</a></li>
<li><a href="#">Menu image 04</a></li>
</ul>
</nav>

CSS

.menu{ width:100%; }
.menu ul{ width:100%; }
.menu ul li{ float:left;}
.menu ul li .megamenu{ display:none; position:absolute; width:100%; background-color:#ccc; left:0; }
.menu ul li:hover   .megamenu{ display:block; }

JSFiddle link

Answer 1

将其添加到 iframe src:

?wmode=transparent&rel=0

这应该有效