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>），否则菜单可以正常运行。

我已将问题排查到visibility 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;

它给了我很多帮助。

可见性：可见和youtube

1 个答案: