CSS height transition with ul not working - css-transitions

Question

I have the following css:
#cssmenu .has-sub .has-sub:hover > ul {
height: 76px;
}
#cssmenu .has-sub .has-sub ul {
height: 0px;
overflow: hidden;
position: inherit;
left: -1px;
top: -1px;
background-color: #999;
transition: height 2s;
-moz-transition: height 2s; /* Firefox 4 */
-webkit-transition: height 2s; /* Safari and Chrome */
-o-transition: height 2s; /* Opera */
}
with this html:
<div id="cssmenu">
<ul>
<li class="active has-sub"><span>Products</span>
<ul>
<li class="has-sub"><span>Product 1</span>
<ul>
<li><span>Sub Product</span></li>
<li class="last"><span>Sub Product</span></li>
</ul>
</li>
<li class="has-sub"><span>Product 2</span>
<ul>
<li><span>Sub Product</span></li>
<li class="last"><span>Sub Product</span></li>
</ul>
</li>
<li class="has-sub"><span>Product 3</span>
<ul>
<li><span>Sub Product</span></li>
<li class="last"><span>Sub Product</span></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
and I'd when I moving my mouse over Product 1:
the transition just not working. Where I went wrong?
The whole page is available here

Answer 1

Don't hide the child ul you are trying to transition. Set it to display:block (it's height is 0px anyway so you can't see it).
#cssmenu .has-sub ul ul {
display: block;
}
A tidier approach would be to be more specific with your original ul selector and only hide the parent UL, rather than hide all UL's and switch the child back to display: block. You'd need to add another class to hook onto with this approach though:
#cssmenu .top-sub-menu > ul {
display: none;
}