In case anyone is interested here is the css3 code i'm using to fade in drop down menus in a Joomla template. Works in Safari, I.E (10+), Firefox and Chrome. As long as the class is the same i imagine it will work in Wordpress and Drupal as well though I could be wrong. I find a 1 second (1s) delay works for me but of course it can be changed to suit. Cut and paste into the 'general-Css' in TT. Hope it's usefull.
/************Main menu animation, fade in from opacity 0-1 over 1 second*******/
ul.navbar-nav .dropdown-menu
{
animation-name: fadein ;
animation-duration: 1s;
-moz-animation-name: fadein; /* Firefox < 16 */
-moz-animation-duration: 1s; /* Firefox < 16 */
-webkit-animation: fadein ; /* Safari, Chrome and Opera > 12.1 */
-webkit-animation-duration: 1s;/* Safari, Chrome and Opera > 12.1 *
-ms-animation-name: fadein ; /* Internet Explorer */
-ms-animation-duration: 1s; /* Internet Explorer */
-o-animation-name: fadein; /* Opera < 12.1 */
-o-animation-duration: 1s; /* Opera < 12.1 */
}
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Firefox < 16 */
@-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/*******************end fade in animation*******************/