CSS Transition - Height Ease

Question

I have this navigation menu which is purely driven by CSS. It expands on mouse hover and collapses on mouse out. The feature I wanted is to maintain the menu open until another button is hovered.

Is it possible by simply using CSS or do I need to work with jQuery or JavaScript?

I have modified an expanding vertical Navigation menu and the ease effect is not working when height value in the CSS is changed. The contents of each Nav element is different and with a fixed value the desired result can not be gained.

It is better if it can be done in only CSS, here is the JSFiddle.

Answer 1

My solution is to set the height transition on the li element, not the ul, this way you don't have to infer a total height.

Here is a working solution: http://jsfiddle.net/siorge/w55rZ/2/

Edit to show code:

/*ul Styles*/
.menu-item ul li {
  background: #fff;
  font-size: 13px;
  line-height: 30px;
  height: 0px;
  list-style-type: none;
  overflow:hidden;
  padding: 0px;

 /*Animation*/
 -webkit-transition: height 1s ease;
    -moz-transition: height 1s ease;
      -o-transition: height 1s ease;
     -ms-transition: height 1s ease;
         transition: height 1s ease;
}


.menu-item:hover li {
  height: 32px;
  border-bottom: 1px solid #eee; 
}

Answer 2

Instead of setting "height: 0;" set "max-height: 0;" then on :hover set "max-height: 500px;"

http://jsfiddle.net/w55rZ/7/

.menu-item ul {      
  /* Remove delay by setting transition delay to -0.25s */
  -webkit-transition: all 1s -0.25s ease-out;
     -moz-transition: all 1s -0.25s ease-out;
       -o-transition: all 1s -0.25s ease-out;
      -ms-transition: all 1s -0.25s ease-out;
          transition: all 1s -0.25s ease-out;
  max-height: 0;
}

.menu-item:hover ul {
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease ;
   max-height: 500px;
}