title: CSS FadeIn effect from display: none to display: block
body: <p>I have a list of items that on hover show a few options below each item in a div. I would like to show these options only when the user hovers on the list item and when they move away reclaim the space that the div occupies. Hence I've used <code>display: none;</code> on the div and on hover set it to <code>display: block;</code>.</p>
  
  <p>A demo of this is <a href="http://jsbin.com/migalofe/1" rel="nofollow">here</a></p>
  
  <p>This works as intended but the transition is way too fast and gives a sort of jarring effect. Is there a nicer way to fade in and out this div (preferably with CSS only)? Or do  I need to resort to using JavaScript for this? (I've developed the app without jQuery so far and would prefer not having to include it only for this).</p>
  
  <p>Also the height of the list items vary so using an opacity transition from 0 to some height is not a viable option.</p>