Question

当我将光标悬停在我自己的wordpress主题中的下拉菜单（单击“M”徽标）时，我已经成功添加了过渡效果，但是当光标离开下拉菜单时没有显示过渡关闭时的效果。您可以查看我自己的主题on this link以获取更多信息。

此处下拉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;
}

那么如何在下拉菜单关闭时添加过渡效果？

Answer 1

而不是只转换高度，你可以尝试

-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;

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

1 个答案: