I think you are looking for something like this: JS Fiddle
I added overflow:hidden;
and also moved the css transitions to the pre-hover tags.
.nav ul ul {
width: 501px;
background: #6db6e5;
height: 0px;
overflow: hidden;
padding-left:0;
margin-left:0;
font-size: 12px;
text-align: center;
-webkit-transition:all 1.0s ease-in-out;
-moz-transition:all 1.0s ease-in-out;
-o-transition:all 1.0s ease-in-out;
transition:all 1.0s ease-in-out;
}