Change speed of transition

[KeredDrahcir]

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 is 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.

[KeredDrahcir]

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;
}