title: Slide Down Div on Hover, have Div Stay on hover?
body: <p>I want to achive something like on <a href="http://shopify.ca" rel="nofollow noreferrer">Shopify.ca</a>, where you can hover over a div to expand another directly below, with a sliding effect. When you're hovering over the expanded div, it will stay there. Then retract when you mouseover anywhere other than the expanded div.</p>
  
  <p><img src="https://i.stack.imgur.com/0LHGq.png" alt="enter image description here"></p>
  
  <p>Here it the JSFiddle I have so far, the problem is the div disappears when you hover over the expanded one.</p>