CSS如何在悬停时为不透明度0的过渡设置动画

Question

当鼠标悬停在父元素上时子菜单列表可见时，我想创建一个过渡效果。

这是html中的列表：

<ul id="main">
<li>a
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</li>

理想情况下会有一个从 opacity: 0 到 opacity:0.9 的过渡效果，但我仍然没有做到。

#main li ul {
   position: absolute;
   display: none;
   visibility: hidden;
   opacity: 0;
   transition: opacity 1s ease-in-out;  
}
#main li:hover > ul {
   display: block;
   visibility: visible;
   opacity: 0.9;
}

JSfiddle 链接，还有我的 CSS 的 sn-p 列表。 http://jsfiddle.net/r66yyhhv/5/

Answer 1

删除显示和可见性属性。

(jsFiddle)

#main li ul {
   opacity: 0;
   transition: opacity 1s ease-in-out;  
}
#main li:hover > ul {
   opacity: 0.9;
}

Answer 2

您需要删除显示属性，但保留可见性属性。否则子列表仍然会触发悬停。

这是一个更模块化的代码和一个很好的滑下效果的例子。

http://jsfiddle.net/eq772a1v/

.with-dropdown-list {
  position: relative;
}

.with-dropdown-list ul {
  position: absolute;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
  -webkit-transform: translateY(-20px);
  transform: translateY(-20px);
}

.with-dropdown-list:hover ul {
  visibility: visible;
  opacity: .9;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}