CSS3下拉菜单可以淡入和淡出吗？

Question

我已经实现了一个带有CSS3的下拉菜单,当父项li悬停时,它会很好地淡入下拉菜单.但下拉不会淡出,这就是原因.由于无法转换显示属性,因此通过转换不透明度来实现淡入淡出.由于只是不透明度已经过渡,您需要将子移动ul- 否则隐藏的子菜单将在悬停时出现.

我已经创建了一个JS小提琴来演示这一点 - 如果没有left:1000px;规则ul#mainNav li ul,它会淡出就好了.但是你可以将鼠标悬停在隐形菜单上.- http://jsfiddle.net/YZvdm/

那么我怎样才能让它淡出而不会让它不小心可以躲避呢？height:0;也将消除淡出,所以这不是一个选择.

Answer 1

实现这项工作的关键是使用visibility:hidden代替display:none和使用transition-delay可见性直到opacity0之后.

.nav li ul {
  visibility: hidden;
  opacity: 0;
  -prefixes-transition-property: opacity, visibility;
  -prefixes-transition-duration: .4s, 0s;
  -prefixes-transition-delay: 0s, .4s;
}

.nav li:hover ul {
  visibility: visible;
  opacity: 1;
  -prefixes-transition-delay: 0s, 0s;
}

小提琴:http://jsfiddle.net/YZvdm/29/