0

我有一个用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.

谢谢你。

4

1 回答 1

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;

它对我有很大帮助。

于 2013-06-20T15:06:16.063 回答