CSS 菜单转换不起作用

Question

我试图在我的 css 下拉菜单中添加一些过渡效果，但是无论我在何处放置过渡代码，它似乎都不起作用。

transition: all 2s ease-in;

我试图让过渡在实际下拉 ul 的父 li 悬停时淡入和淡出，以便事件不会突然发生。

jsfiddle： http: //jsfiddle.net/JazParkyn/6jshy/5/

Answer 1

您不能转让该display财产。尝试用于opacity您的下拉菜单。

nav ul ul {
    opacity: 0;
    visibility: hidden;
    transition: all .5s ease-in;
    -o-transition: all .5s ease-in;
    -ms-transition: all .5s ease-in;
    -moz-transition: all .5s ease-in;
    -webkit-transition: all .5s ease-in;
}
nav ul li:hover > ul {
    visibility: visible;
    opacity: 1;
}

请参阅演示。