html - CSS3 转换失败

Question

我无法过渡到我正在开发的网站上工作。导航菜单隐藏并正确显示，但它只是立即出现而没有过渡。CSS是这样的：

.nav ul li ul li {
    display:none;
    visibility:hidden;
    transition: all 0.5s ease;
}
.nav ul li:hover > ul 
{
    transition: all 0.5s ease 0s;
    display:block;
    visibility:visible;
}

HTML是

<div class="nav">
    <ul>
        <li>test</li>
        <li>test
            <ul class="sub-menu">
                <li>test</li>
            </ul>
        </li>
    </ul>
</div>

我已经在 chrome、ffx 中对其进行了测试。

实际上，我从这个网站上的另一个答案中得到了大部分代码，所以我不确定我的问题是什么。

我应该提到，我已经尝试过其他答案的不透明度，但是在下拉菜单中，它不会工作，因为菜单会保留在那里。

Answer 1

从display: none到的过渡display: block并不像您期望的那样。

改为使用opacity。

jsFiddle 演示

Answer 2

display 属性不适用于过渡。

itay 的建议是有效的，您也可以使用其他属性（位置？）来达到预期的效果。

Answer 3

试试这个 CSS 这会很好

.nav ul li > ul {
   opacity:0;
    overflow:hidden;
     transition: all 0.5s ease;
}
.nav ul li:hover > ul 
{
    transition: all 0.5s ease 0s;
    height:auto;
    opacity:1;  
}

在这里演示