jquery - マウスが n 秒以上メニュー領域の外に出た後、div を自動的に閉じる

Question

以下のリストについては：

<div id="top-nav">
 <ul>
  <li><span>Products &amp; Services</span>
    <ul>
      <li><div class="megamenu">Content here...</div></li>
    </ul>
  </li>
  <li><span>Support &amp; Training</span>
    <ul>
     <li> <div class="megamenu">Content here...</div></li>
    </ul>
  </li>
  <li><span>Communities</span>
    <ul>
     <li> <div class="megamenu">Content here...</div></li>
    </ul>
  </li>
  <li><span>Store</span>
    <ul>
      <li><div class="megamenu">Content here...</div></li>
    </ul>
  </li>
 </ul>
</div>

以下のコードを使用して、div をクリックして展開します。

$(function(){
    $('#top-nav span').click(function(){
        divTrigger = $('#top-nav span').index(this);
        thisMegaMenu = $('.megamenu:eq('+divTrigger+')');
        $('.megamenu').slideUp(100);
        if(thisMegaMenu.is(":not(':visible')")){
        thisMegaMenu.slideDown(200);
        }
});
});

私が望むのは、マウスが任意の秒数以上メニュー領域の外に移動した場合に div ドロップダウンを閉じることです (トップ ナビゲーション div 領域の外に移動するか、現在ドロップダウンされている div の外に移動する)。 .

オンライン デモはこちらです (これは、閉じるボタンがあった他のコードのフォークされたデモです): http://jsfiddle.net/KY9gr/ この元の投稿から水平メニューになるように編集したことに注意してください。

私は jQuery の例に頭を悩ませようとしている C# プログラマーなので、忍耐とガイダンスに感謝します。