drop-down menu closing issue in wordpress?

Question

I already succeed to added the transition effect when hover the cursor to drop-down menu (click the "M" logo) in my own wordpress theme but when the cursor being away from drop-down menu don't show the transition effect when closing. You can check out my own theme on this link for further info.

Here drop-down css style:

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

So How I can add the transition effect when drop-down menu closing?

linktoahref linktoahref · Accepted Answer · 2016-01-31T16:43:48

Instead of transitioning only the height you could try

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

drop-down menu closing issue in wordpress?

1 Answers