CSS3 Transition Slide Down Element

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