视频嵌入CSS悬停菜单

我需要添加一个视频嵌入（如youtube）在一个悬停菜单，这是只用CSS。嵌入在Chrome、Firefox和Safari中运行良好。然而在IE中（版本似乎并不重要）存在一个问题（惊喜）

如果我浏览嵌入IE，菜单将消失，视频将无法观看

有没有一种方法可以只使用CSS来实现这一点

这里有一个简单的演示和一把小提琴，它有问题。只需打开菜单2并浏览嵌入IE，子菜单就会消失

菜单，菜单，子菜单{
填充：0；
保证金：0；
}
菜单li，菜单ul。子菜单li{
列表样式类型：无；
显示：内联块；
}
菜单li a，菜单li ul.sub-menu li div{
文字装饰：无；
颜色：#fff；
背景:#666；
填充：7px；
显示：内联块；
}
ul#菜单li{
位置：相对位置；
}
ul#菜单li ul.子菜单{
显示：无；
位置：绝对位置；
顶部：30px；
左：0；
宽度：100px；
}
ul#菜单li：悬停ul.子菜单{
显示：块；
}

<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;
}