title: CSS Drop Down Div animations?
body: <p>I have been trying to get my drop down cart to fade/slide up when you hover over the cart icon. (Like the submenus)</p>
  
  <p>However, I am not a CSS transition wizard! Have tried generic fades using transition element but it did not work.</p>
  
  <p>My Drop down works by just displaying a second div when you hover over it - which has the php functions to grab the users cart items &amp; price.</p>
  
  <p>I am beginning to think whether there is a much better way to do this?</p>
  
  <p>Website with drop down cart in header: <a href="http://www.forumjewellers.ds-demo.co.uk/" rel="nofollow noreferrer">My Website with Cart</a></p>
  
  <p>My Code: <a href="https://jsfiddle.net/em2bvxvx/" rel="nofollow noreferrer">https://jsfiddle.net/em2bvxvx/</a></p>
  
  <p>Cart Drop Down CSS:</p>
  
  <pre><code>.mini-cart {background-color:red;background-repeat: no-repeat;background-size: 22px 22px;width: 22px;height: 22px;font-size: 10px;padding-top: 6px;padding-left: 7.4px;margin-top: 13px;margin-left: 14px;color: #000;}
  
  .shopping-cart {position: relative;display: inline-block;}
  
  .minicart-dropdown {width: 300px;display: none;background-color: #fff;min-width: 160px;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);z-index: 1;right: 0px;padding: 20px;top: 40px;}
  
  .minicart-dropdown .size-woocommerce_thumbnail {height: auto;max-width: 50px;}
  
  .minicart-dropdown a {color: #fff;padding: 12px 16px;text-decoration: none;display: block;}
  
  .minicart-dropdown a:hover {background-color: #ddd}
  
  .shopping-cart:hover .minicart-dropdown {display: block;}
  
  .minicart-dropdown &gt; .cart-buttons {display: flex;color: #fff;margin-top: 20px;}
  
  .minicart-dropdown &gt; .cart-buttons &gt; .minicart-vb, .minicart-co {width:49%; text-align:center;background-color: #01273a!important;cursor:pointer;}
  
  .minicart-dropdown &gt; .cart-buttons &gt; .minicart-co {margin-left: 15px;}
  
  .minicart-dropdown .content {margin-top: 20px;}
  </code></pre>