Hide dropdown div with jQuery on mouseout
<p>I know there are hundreds of topics regarding this, however none of them seemed to work for me. I want for the dropdown to hide when the mouse leaves the element with jQuery, this is what I currently get: </p>

<p><a href="https://i.stack.imgur.com/m9s7Z.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/m9s7Z.gif" alt="Example of current undesired behavior"></a></p>

<p><strong><a href="http://codepen.io/valik140795/pen/qadXOo" rel="nofollow noreferrer">CodePen example</a></strong>.</p>

<p>jquery:</p>

<pre><code>$(document).ready(function() {
  $('.expand').click(function(e) {
    e.preventDefault();
    $('section').slideUp('normal');
    if ($(this).next().is(':hidden') === true) {
        $(this).addClass('on');
        $(this).next().slideDown('normal');
    }
  });
  $('section').hide();
});

$('section').mouseleave(function(){
    $(this).hide();
});
</code></pre>

<p>I've also tried the following:</p>

<pre><code>$('section').hide();
$('.section').on('mouseout',function(){
    $(this).hide();
})
</code></pre>

<p>Yet, nothing really seems to work correctly and gives me the same result. How can I fix this?</p>