css3 显示带过渡的 div

Question

我有一个选项卡，当我将鼠标悬停在它上面时，我会打开一个下拉菜单。我想要的是，当我将鼠标悬停在选项卡上时，下拉菜单将以 0.5 秒的过渡显示，以呈现动画效果。

要从上到下打开。您可以在 linkedIn 页面的下拉列表中看到类似的内容。

这就是我目前所拥有的。

.dropdown:hover .dropdown-menu { 显示: block ；

.dropdown-menu {
    width: 211px;
    border-color: #efefef;
    border-width: 3px;
    background-clip: padding-box;
    background-color: #ffffff;
    border-radius: 0 0 7px 7px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
    display: none;
    float: left;
    font-size: 12px;
    left: 0;
    list-style: outside none none;
    margin: 0px 0 0;
    min-width: 160px;
    padding: 5px 0;
    position: absolute;
    top: 100%;
    z-index: 1000;
}

我尝试将其添加到下拉菜单中:悬停和下拉菜单但没有成功。

     -o-transition: opacity 0.5s;
     -moz-transition: opacity 0.5s;
     -webkit-transition: opacity 0.5s;
     transition: opacity 0.5s;

Answer 1

添加不透明度:0； .dropdown 和不透明度:1； .dropdown-menu

Here is a demo