CSS transition and property delay not working on mouseout - html

Question

I've made a hidden vertical menu, which show on hover/active. I'm using the transition property with a delay.
When mouse is hover, menu is showing with the delay
When mouse is out, menu is going/draw back, but without any delay.
li {
display: block;
padding: 10px;
}
ul ul {
max-height: 0em;
overflow: hidden;
}
ul > li:hover ul,
ul > li:active ul {
max-height: 10em;
transition: 1000ms all ease 500ms;
}
<ul>
<li>Option1
<ul>
<li>OptionA</li>
<li>OptionB</li>
</ul>
</li>
<li>Option2</li>
</ul>
How can I have a delay/duration, moving back to initial value ?
PS: I can't use JavaScript.

Answer 1

Add the transition to the element, not the state. When the state is over (leaving the element with your mouse) the CSS takes no more effect.
Updated. Snippet now opens instantly and has a closing delay of 2000ms. By increasing the hover state delay you can increase the opening delay.
li {
display: block;
padding: 10px;
}
ul ul {
max-height: 0em;
overflow: hidden;
-webkit-transition: 1000ms all ease 2000ms;
-moz-transition: 1000ms all ease 2000ms;
-ms-transition: 1000ms all ease 2000ms;
-o-transition: 1000ms all ease 2000ms;
transition: 1000ms all ease 2000ms;
}
ul > li:hover ul,
ul > li:focus ul,
ul > li:active ul {
max-height: 10em;
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-ms-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
}
<ul>
<li>Option1
<ul>
<li>OptionA</li>
<li>OptionB</li>
</ul>
</li>
<li>Option2</li>
</ul>
Note: You can also use transition: 1000ms max-height ease 500ms; in this case for slightly better performance. Not significant on a single transition but they might add up.

Answer 2

You have to set transition to the element when not hovered too. Try the snippet below.
li {
display: block;
padding: 10px;
}
ul ul {
max-height: 0em;
overflow: hidden;
transition: 400ms all ease 500ms;
}
ul > li:hover ul,
ul > li:active ul {
max-height: 10em;
transition: 1000ms all ease 500ms;
}
<ul>
<li>Option1
<ul>
<li>OptionA</li>
<li>OptionB</li>
</ul>
</li>
<li>Option2</li>
</ul>

Answer 3

Simply add the transition to the original properties, and you are good to go, because you can add a transition-delay there. This is why you should specify both the state, and the original elements. Because you wish to include the delay only on exiting the :hover/:active/:focus state.
li {
display: block;
padding: 10px;
}
ul ul {
max-height: 0em;
overflow: hidden;
}
ul > li ul,
ul > li ul {
transition: all ease 500ms;
transition-delay: 2s;
}
ul > li:hover ul,
ul > li:active ul,
ul > li:focus ul {
max-height: 10em;
transition: 1000ms all ease 500ms;
}
<ul>
<li>Option1
<ul>
<li>OptionA</li>
<li>OptionB</li>
</ul>
</li>
<li>Option2</li>
</ul>