Задержка выпадающего меню?

Question

[Roman Petrenko]

Добрый день!
На сайте есть выпадающее меню freemus.net.
Как выставить задержку в раскрытии как первого, так и второго уровня.
Предполагаю, что с помощью transition-delay, но видимо не туда пишу. Прошу помощи

<li><a href="/publ">Музыка <span>+</span></a>
<!--дропменю первого уровня >> -->
<ul class="dropmenu" style="margin-left:-9px;">

<li><a href="/publ/ambient_music/50">Ambient Music<span>+</span></a>
 
 <!--дропменю второго уровня >> -->
 <ul style="margin-top:1px;">
 <li><a href="/publ/ambient_music/ambient/51">Ambient</a></li>
 <li><a href="/publ/ambient_music/dark_ambient/52">Dark Ambient</a></li>
 <li><a href="/publ/ambient_music/meditative/53">Meditative</a></li>
 </ul>
 </li>
 <!--дропменю второго уровня << -->

/*дропменю первого уровня >> */ 

.dropmenu li{padding:0px; background:none; }
ul.mainmenu li:hover ul{
margin-top:-10px;
width:230px;
display: block;
z-index: 9999;
position:absolute;
background-color: #FFF;
border: 1px solid #cccccc;
border-bottom: 4px solid #f00000;
}
ul.mainmenu ul{display: none;}

/*дропменю второго уровня >> */
ul.mainmenu li:hover li{position: relative; list-style: none;}
ul.mainmenu li:hover li ul{
left:100%; 
top: -1px; 
display: none; }

ul.mainmenu li:hover li:hover ul{display: block;} 
ul.mainmenu li:hover ul li{float: none;}
ul.mainmenu li:hover li a span{float:right; padding-left:0px; margin-top:2px;}

ul.mainmenu li:hover li a {
line-height:26px; 
margin-right:0px;
text-transform:none;
color:#000000;
text-shadow:none; 
display: block; 
list-style: none; 
text-decoration: none; 
padding-top:6px;
padding-left:20px;
padding-right:20px;
padding-bottom:6px;
border-top: 1px solid #e9e9e9;
}
ul.mainmenu li:hover li:first-child a{border-top:none;}

ul.mainmenu li:hover li a:hover {
display:block;
color: #f00000;
background:none;
text-decoration: none;
}
ul.mainmenu li:hover ul li a:active {

}
/*дропменю второго уровня << */
/*дропменю первого уровня << */