Сохранение DIV открыто после зависания, если мышь внутри открыта. DIV

Question

В настоящее время у меня есть немного jQuery, который открывает под ним под ним div. Он отлично работает, однако это не выпадающее меню, а дополнительное меню.

Я хочу, чтобы div 'quickCourse' был открыт, если мышь находится внутри этого div.

Так что я хочу, чтобы div закрывался, если мышь не находится над литом: nth-of-type (6) или div the quickCourse. Любая помощь или направление были бы весьма признательны.

У меня такое чувство, что это связано с mouseOver, но немного неуверенный? - JSfiddle того, что я до сих пор можно найти здесь:

http://jsfiddle.net/owenoneill/REyRg/11/

<script type="text/javascript"> 
      $(document).ready(function() { 
      $(".header ul.menu > li:nth-of-type(6) ").hover(
       function() { 
        $("div.quickCourse").fadeIn(); 
       }, 
       function() { 
        $("div.quickCourse").fadeOut(); 
       } 
      ); 
      }); 
      </script> 

Answer 1

$(document).ready(function() { 
 
    $(".header ul.menu > li:nth-of-type(6)").mouseover(function() { 
 
    $("div.quickCourse").fadeIn(); 
 
    }); 
 

 
    $(".header ul.menu > li:nth-of-type(6), div.quickCourse").mouseleave(function() { 
 
    $("div.quickCourse").fadeOut(); 
 
    }); 
 
    $("div.quickCourse").mouseover(function() { 
 
    $(this).stop(true, true).show(); 
 
    }); 
 
});

.header ul.menu { 
 
    float: left; 
 
    list-style-type: none; 
 
} 
 

 
.header ul.menu li { 
 
    float: left; 
 
    padding: 10px; 
 
} 
 

 
.quickCourse { 
 
    position: absolute; 
 
    margin: 80px 0px 0px 0px; 
 
    width: 300px; 
 
    height: 30px; 
 
    background: #000; 
 
    display: none; 
 
    color: #FFF; 
 
    padding: 50px; 
 
    text-align: center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="header"> 
 
    <ul class="menu"> 
 
    <li>TEST 1</li> 
 
    <li>TEST 2</li> 
 
    <li>TEST 3</li> 
 
    <li>TEST 4</li> 
 
    <li>TEST 5</li> 
 
    <li>TEST 6</li> 
 
    </ul> 
 
</div> 
 
<div class="quickCourse">HULLO!</div>