title: CSS3 Transition Slide Down Element
body: <p>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 <a href="http://jsfiddle.net/8YHbq/" rel="noreferrer">Fiddle</a>.   </p>
  
  <p><strong>HTML:</strong>
      </p>
  
  <pre><code>    &lt;ul id="menutitle"&gt;Menu Title&lt;/ul&gt;
          &lt;ul id="submenu"&gt;
              &lt;li&gt;&lt;a href="#"&gt;Link 1&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Link 2&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Link 3&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Link 4&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>#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; }
  </code></pre>