nav transitioning with css

Question

I have a nav-bar and I am trying to make the submenu slide down on hover.

Here is the current CSS I have for the transition:

.nav ul li:hover > ul {
    height:150px;
    -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;
}

However it only does the background of the submenu, which can be seen here

Does anyone know how I would fix this so that the whole menu transitions?

Answer 1

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;    
}