视频嵌入CSS悬停菜单中

Question

我需要在仅使用CSS制作的悬停菜单中添加视频嵌入（例如youtube）。嵌入在Chrome，Firefox和Safari中运行良好。但是在IE中（版本似乎并不重要）有一个问题（惊喜）

如果我查看IE中的嵌入，菜单会消失，无法观看视频。

有没有办法只使用CSS？

这是一个简单的演示和一个有问题的小提琴。只需打开菜单2并浏览IE中的嵌入，子菜单就会消失。 http://jsfiddle.net/wtpsh/2/

<ul id="menu">
  <li>
    <div><a href="#">Menu 1</a></div>
  </li>
  <li><a href="#">Menu 2</a></div>
    <ul class="sub-menu">
        <li>
            <div><a href="#">Sub Menu</a></div>
        </li>
        <li>
            <div><a href="#">Sub Menu</a></div>
        </li>
        <li>
            <div><a href="#">Sub Menu</a></div>
            <iframe width="420" height="315" src="//www.youtube.com/embed/X111ImmD4Gw" frameborder="0" allowfullscreen></iframe>
        </li>
    </ul>
   </li>
</ul>

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;
}
ul#menu li a, ul#menu li ul.sub-menu li div {
    text-decoration: none;
    color: #fff;
    background: #666;
    padding: 7px;
    display:inline-block;
}

ul#menu li {
    position: relative;
}
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;
}