fadeIn child on hover then fade out child on child blur
<p>Im sure this has been asked but I have not located it.</p>

<p>I have li items acting as parents of child sub menu divs.</p>

<p>On parent li hover, the child div shows. But when I blur the parent, the child div hides. </p>

<p>How can I make it so that the child div will remain visible as long as the mouse cursor is over the child div, once the cursor leaves the div, the div will hide.</p>

<p>My code so far is as follows:</p>

<pre><code>$(document).ready(function(){
    $(".menuSection").hover(function(){
        $(this).children(".subMenuWrap").fadeIn(100);
    });
    $(".subMenuWrap").blur(function(){
        $(this).fadeOut(100);
    });
});
</code></pre>

<p>As of now, the fadeIn works fine, they just dont dissapear on blur. 
Any help is appreciated!</p>
