html - visibility : visible and youtube

Question

我有一个用 ul 创建的菜单/li列出。

为了创造一个不错的效果，我有以下 css:

#menu ul { 

    /* ... */

    visibility:hidden; 

    /* ... */

} 

#menu li:hover > ul {
    /* ... */ 

    visibility: visible;

    /* ... */
}

您可以在此处查看完整代码:http://www.red-team-design.com/css3-animated-dropdown-menu .

除非我嵌入 Youtube 视频(例如随机视频 - <iframe src="http://www.youtube.com/embed/e80qhyovOnA?rel=0" frameborder="0" width="420" height="315"></iframe>)，否则菜单工作正常，没有任何问题。

我已经解决了可见性 css 属性和使用 Chrome 时的问题。

有什么方法可以更改 CSS 以保持弹跳效果？

将其替换为 display:none有效，但它失去了弹跳效果。似乎与 Youtube 的代码有冲突。理想情况下，我不要触摸 iframe 内的任何东西。除非它是自动化的，因为视频是通过 WYSIWYG 嵌入的.

谢谢。

Answer 1

Youtube CSS 的转换有问题，所以，改变一下

-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;

到

-webkit-transition: opacity .2s ease-in-out;
-moz-transition: opacity .2s ease-in-out;
-ms-transition: opacity .2s ease-in-out;
-o-transition: opacity .2s ease-in-out;
transition: opacity .2s ease-in-out;

对我帮助很大。