JQuery slideToggle() vs CSS animations

Question

Please do not flag this as a duplicate, I'm not asking about what is better to use. I made a slideout navbar the other day, and I used the jQuery slideToggle() to get the animation working. I tried using CSS transitions, but I failed miserably. The question is, is it possible to get that effect with transitions (exactly the effect on the JSfiddle) without jQuery (or any JS at all, for that matter)? If so, how?

Answer 1

Sure is, but using this method you will have to play around with the top position initially (it is negative)

Important parts

#nav li ul {
    position: absolute;
    margin-left: -1px;
    list-style: none;
    padding: 0;
    top: -245px;
    -webkit-transition:all 1s ease;
    -moz-transition:all 1s ease;
}

#nav li:hover ul {
    visibility: visible;
    display:block;
    top: 45px;
    z-index:-999; /* This is to make the menu be behind the nav bar*/
}

#nav li ul:hover {
    display: block;
}

Demo

Also check this out for a simplified version of the slide effect.

Answer 2

Yes it's possibile (here's an example: http://jsfiddle.net/DvVLw/3/) e.g. if your items height are set initially to 0 and you specify, for every submenu, an exact height to reach at the end of the animation, since CSS3 animations cannot (yet) work with auto keyword (so an animation from 0 to auto is not possible).

The height of course is hard to tell when your menu is dynamic and you don't previously know how many items it will contain