You can use opacity
instead of display
:
ul.sub-menu {
display:block;
opacity: 0;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
}
#main-menu li:hover > ul.sub-menu {
opacity: 1;
}