Why does not the delay menu?

Hello! There is a website.
There is a top menu. I need that when you hover over the menu the submenus appear with a slight delay.
I set the properties for this submenu
transition-delay: 1s, 1s;
 transition-duration: .3s .3s;

But nothing has changed. Maybe I do not fully understand the principles of animation? Tell me, please.
July 2nd 19 at 16:53
2 answers
July 2nd 19 at 16:55
Solution
With the property display , the transitions do not work. Use css animation.
.element-animation{
 animation: animationFrames linear .5s;
 animation-fill-mode:forwards; 
}

@keyframes animationFrames{
 0% {
opacity:0;
display:none
}
 90% {
opacity:0;
display:block
}
 100% {
opacity:1;
 display:block 
}
}
July 2nd 19 at 16:57
Solution
For display:none is not working transition.

Find more questions by tags CSSHTML