Change animation's transition speed in CSS when un-hovering element - html

Question

I've got a dropdown menu that uses lists to achieve it. The sub menu has a height of 0 and then the hight changes when the user hovers over it.
The limit of the animation is that I can't set the max-height as auto so I've set it to a value that it unlikley that the sub menu will ever reach.
Since the tranistion time is based on the max-height is is very fast so I've slowed it down to be a suitable speed but what I'd like is to have it disappear a lot faster when someone un-hovers or even have it disppear immediately. Is there a way to do this?
.menu ul ul{
float: left;
padding: 0;
position: absolute;
text-align: left;
width: 274px;
z-index: 1000;
max-height: 0;
overflow: hidden;
-webkit-transition: max-height 1s ease-in;
-moz-transition: max-height 1s ease-in;
-o-transition: max-height 1s ease-in;
-ms-transition: max-height 1s ease-in;
transition: max-height 1s ease-in;
}
.menu ul li:hover ul, .menu li.over ul {
max-height: 999px;
}
I'd like to stick to CSS but I'm willing to use JavaScript.

Answer 1

Try this :
For the basic class ( not the :hover ), just define the transition duration you want for when the list will disapear.
On hover, define a new transition duration ( the duration that the list will take to appear ).
Quick exemple here : http://codepen.io/AxelCardinaels/pen/wBQZbm
HTML :
<div class="text">Some texte</div>
CSS :
.text{
background:blue;
transition:all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
-ms-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}
.text:hover{
background:red;
transition-duration:2s;
}