1

我需要在仅使用 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;
}
4

0 回答 0