Height auto transition Full CSS

HTML

<ul class="menu">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3
    <ul class="sous-menu">
      <li>category 1</li>
      <li>category 2</li>
      <li>category 3</li>
      <li>category 4</li>
    </ul>
  </li>
  <li>item 4</li>
</ul>

CSS

.sous-menu {
	display: block;
	overflow: hidden;
	max-height: 0;
	transition: max-height 2s;
}
.menu li:hover .sous-menu {
	max-height: 100em; // ça vous donne 100 ligne d'avance ;)
}