title: CSS3 hidden div fade on in hover?
body: <p>I have my jsfiddle here.</p>
  
  <p><a href="http://jsfiddle.net/xC5wN/" rel="nofollow">http://jsfiddle.net/xC5wN/</a></p>
  
  <p>I basically want the hidden div to slide open when about is hovered over with a mouse. It's going to be a part of a navigation bar and the description of the page will slow below.</p>
  
  <p>I've tried using</p>
  
  <pre class="lang-css prettyprint-override"><code>-webkit-transition: all 0.5s ease-in-out;
  </code></pre>
  
  <p>to no avail. Here is my code:</p>
  
  <pre class="lang-css prettyprint-override"><code>.aboutnav {
      background-color: #a661ca;
  }
  .aboutcontents {
      display: none;
  }
  .aboutnav:hover .aboutcontents {
      display: block;
      background-color: #a661ca;
  }
  </code></pre>