I have successfully implemented a transition effect for the dropdown menu in my custom WordPress theme. However, I am facing an issue where the transition effect does not appear when the cursor moves away from the dropdown menu while closing. To see this in action, you can visit my theme here.
Here is the CSS style for the dropdown:
.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;
}
How can I add a transition effect for the dropdown menu when it is closing?