title: Drop Down Menu Fade Out
body: <p>I've created a drop down menu. When the user hovers over the navigation button, using CSS3 Transitions the class 'dropdown-content' fades in as shown in the demo below:</p>
  
  <p><a href="https://jsfiddle.net/4xk78qse/" rel="nofollow noreferrer">https://jsfiddle.net/4xk78qse/</a></p>
  
  <p>What I can't figure out is how to fade out the 'dropdown-content' when the user isn't hovering over any of the buttons. </p>
  
  <p>I did try adding</p>
  
  <pre><code>animation fadeout 2s;
  
  @keyframes fadeout {
     from { opacity: 1; }
     to { opacity: 0; }
  }
  </code></pre>
  
  <p>Essentially the opposite of the fade in animations in the jsfiddle example but this didn't work. </p>
  
  <p>In summary, I am looking to fade out when the user isn't hovering over any of the buttons.</p>