CSS3 Transition Slide Down Element

Question

I'm trying to recreate a similar menu effect found on the World War Z movie site, but I can't seem get the CSS transition working correctly. I've gotten the hover element to display the hidden block, but the CSS transition wont work. I'm trying to get a cool effect that would slide from the top or bottom, I don't have a specific preference. Also if I try to go over any of the links, the submenu disappears before I can click on it. Here's the Fiddle.

HTML:

    <ul id="menutitle">Menu Title</ul>
        <ul id="submenu">
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
            <li><a href="#">Link 4</a></li>
        </ul>
</nav>

CSS:

#topmenu {
    background: #000; 
    width: 150px;
    height: 50px;
    color: #fff; 
}

#submenu {
    display: block;
    position: absolute;
    width: 110px;
    display: none;
    background: #333;
    list-style: none;
    line-height: 2em; 
}

#menutitle:hover + #submenu {
     display: block; 
    -webkit-transition: height 1s ease;
    -moz-transition: ease-in 2s none;
    -ms-transition: ease-in  2s none;
    -o-transition: ease-in  2s none;
    transition: ease-in  2s none;  
}

#menutitle { color: #ff0000; }

a { color: #FF0; }

Answer 1

A few things:

Your :hover selector should be on the #topmenu element, not the title. That's why the nav area is disappearing so suddenly - it only takes hovering on the menu text.

You might have a little misconception of the animate property definition. You need to pick a specific property to animate; usually something like 'height'. In this case, my solution was to set "max-height". There may be some way of setting height to something like 'auto', but if so it's lost on me.

Additionally, the "transition" property is set on the object at all times - not just 'when hovering'. It's a sort of constant state to indicate "WHEN this property changes, do a smooth transition". That way, you can have a series of different states giving different heights.

http://jsfiddle.net/8YHbq/4/

#topmenu {background: #000; width: 150px; height: 50px; color: #fff; }

#submenu {display: block;
position: absolute;
width: 110px;
background: #333;
list-style: none;
line-height: 2em;
overflow: hidden;
    max-height:0;
    transition: max-height 0.7s ease-in; 
}

#topmenu:hover #submenu {
max-height: 200px;}

#menutitle {color: #ff0000;}
a {color: #FF0}

Currently, the one issue with my version that I'm just now realizing is that since max height animates to 200px, the nav menu will be fully expanded before it reaches 200 - making the animation less smooth. Maybe you could adjust that a bit based on your needs.