有没有办法使用-webkit转换与显示？
我使用CSS显示来隐藏和显示导航第二级…但只显示：none和显示：阻止：hover是一个有点不性感…一个轻松将是伟大的(如-webkit转换：显示300ms ease-在;)
我知道这是很容易做到这一点与jQuery，但我目前正试图用CSS3设置一切(我知道：并不是所有的浏览器都支持它，但这对我目前正在处理的这个项目是无关紧要的)
这里有一些代码&结构：(li.menu1有：hover with section.nav-menu1 {display：block;})
<ul>
<li class="menu1"><a href="#">Menu 1</a>
<section class="nav-menu1">
<h1 class="none">Level 2 Overlay</h1>
<nav>
<h2 class="none">Menu 1 Navigation</h2>
<ul>
<li><a href="#">Menu 1 Level 2-1</a></li>
<li><a href="#">Menu 1 Level 2-2</a></li>
<li><a href="#">Menu 1 Level 2-3</a></li>
</ul>
</nav>
</section>
</li>
</ul>
解决方法
您应该使用高度或宽度转换来显示和隐藏二级菜单。转换不支持显示属性。
有一篇文章在ODC与something similar您的需要。另外，我有modified it a bit为了看起来更像菜单项。在Opera 10.7中完美，在Firefox 3.6.12中没有转换，Chrome 7.0.517.41中完全没有。
我希望这将有助于您自己的动画菜单的起点。
更新1：
Your menu with ease-in transitions.可能我的结构有问题。问题是转换不适用于自动，因此您必须手动指定最终高度。
更新2：
使用不透明度作为过渡属性。在隐形元素集可见性：隐藏和可见性：可见的可见。这将阻止看不见的可点击链接。此外，可见隐形转换不起作用，不知道为什么。必须更多的工作。
