Css 下拉菜单关闭wordpress中的问题？

我已经成功地在我自己的wordpress主题中将光标悬停到下拉菜单（单击“M”徽标）时添加了过渡效果，但当光标远离下拉菜单时，关闭时不会显示过渡效果。你可以查看我自己的主题，了解更多信息

此处为css样式下拉列表：

.dropdown-menu {
    border-bottom-right-radius: 77px;
    border-bottom-left-radius: 77px;
    /* background: url(img/submenu.png) no-repeat scroll right/ 91% 100%; */
    position: absolute;
    height:0;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 153px;
    padding: 1px 0;
    margin: 2px 0 0 0;
    list-style: none;
    font-size: 14px;
    text-align: center;
    background-color: transparent!important;
    border: 1px solid #ccc;
    border: 1px solid rgba(0,0,0,0.15);
    background-clip: padding-box;
    opacity: 0;
    top: 35px;
    visibility: hidden;
    -webkit-transition:height 300ms ease-in;
    -moz-transition:height 300ms ease-in;
    -ms-transition: height 300ms ease-in;
    -o-transition:height 300ms ease-in;
    transition:height 300ms ease-in;
    overflow: hidden;
}

.navbar-nav li:hover .dropdown-menu {
    opacity: 1;
    top: 105px;
    visibility: visible;
     height:300px;
}

---

那么，我如何在下拉菜单关闭时添加转换效果呢？

而不是只转换您可以尝试的高度

-webkit-transition: all 300ms ease-in;
-moz-transition: all 300ms ease-in;
-ms-transition: all 300ms ease-in;
-o-transition: all 300ms ease-in;
 transition: all 300ms ease-in;