title: Transitions on the CSS display property
body: <p>I'm currently designing a CSS 'mega dropdown' menu - basically a regular CSS-only dropdown menu, but one that contains different types of content.</p>
  
  <p>At the moment, <strong>it appears that CSS&nbsp;3 transitions don't apply to the 'display' property</strong>, i.e., you can't do any sort of transition from <code>display: none</code> to <code>display: block</code> (or any combination).</p>
  
  <p>Is there a way for the second-tier menu from the above example to 'fade in' when someone hovers over one of the top level menu items?</p>
  
  <p>I'm aware that you can use transitions on the <code>visibility:</code> property, but I can't think of a way to use that effectively.</p>
  
  <p>I've also tried using height, but that just failed miserably.</p>
  
  <p>I'm also aware that it's trivial to achieve this using JavaScript, but I wanted to challenge myself to use just CSS, and I think I'm coming up a little short.</p>