title: CSS3 transition fadein with display:none
body: <p>I've got some element I want to <strong>fade</strong> with <strong>CSS3</strong>. It can be simply done by 2 classes with <code>opacity: 0</code> and <code>opacity: 1</code>, but problem is faded element is some dropdown menu and it has <strong>elements under</strong> it, so even if it has opacity: 0, its still <strong>'clickable'</strong> and elements <strong>under</strong> it are not.</p>
  
  <p>If I add <code>display: none;</code> attribute, element is <strong>not animated.</strong></p>
  
  <p>Is it possible with <strong>css only</strong> to avoid it?</p>
  
  <p>I've checked <a href="https://stackoverflow.com/questions/3331353/transitions-on-the-display-property">this</a> but didnt find working solution</p>
  
  <p><a href="http://jsfiddle.net/Eh7jr/" rel="nofollow noreferrer">http://jsfiddle.net/Eh7jr/</a></p>