Dropdown delay?

Question

css

Good afternoon!
The site has a freemus.net dropdown menu .
How to set a delay in the disclosure of both the first and second levels.
I assume that with the help of transition-delay, but apparently I’m writing in the wrong place. I ask for help

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

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