css - li:hover display:block ul 这是 li 的孩子。如何进行过渡？

Question

li:hover display:block ul 这是 li 的孩子。如何进行过渡？

代码：

<li class="level0 nav-2 level-top parent">
    <a href="#" class="level-top"><span>Womens</span></a>
    <ul class="level0"><li class="level1 nav-2-1 first">
        <a href="#"><span>Running</span></a></li>
        <li class="level1 nav-2-2"><a href="#"><span>Skateboarding</span></a></li>
        <li class="level1 nav-2-3 last"><a href="#"><span>Casual</span></a></li>
    </ul>
</li>

Answer 1

CSS 过渡

li ul {
    opacity: 0;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

li:hover ul {
    opacity: 1;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}​

小提琴：http: //jsfiddle.net/gezmy/