jQueryとhtml5でサブメニューを作成する

jQueryとjavascriptでサブメニューを作りたいと思います。私はこのHTML構造を有する：CSSでjQueryとhtml5でサブメニューを作成する

<nav class="container"> 
    <ul> 
     <li><a href="#" title="Werken in de zorg">Werken in de zorg</a> 
      <ul class="submenu"> 
       <li><a class="label" href="#" title="Lees meer over Werkvelden">Werkvelden</a></li> 
       <li><a href="#" title="Lees meer over Eerstelijnzorg">Eerstelijnzorg</a></li> 
       <li><a href="#" title="Lees meer over Geestelijke Gezondheidszorg">Geestelijke Gezondheidszorg</a></li> 
       <li><a href="#" title="Lees meer over Gehandicaptenzorg">Gehandicaptenzorg</a></li> 
      </ul> 
     </li> 
     <li><a href="#" title="Vacatures">Vacatures</a></li> 
     <li><a href="#" title="Opleidingen en scholen">Opleidingen en scholen</a></li> 
    </ul> 
</nav>

は何を表示しないように.submenuに設定されています。しかし、今はjavascript。をお願いします。もしあなたがホバートリーアイテムを持っていれば。サブメニューが表示されます。あなたがサブメニューから行くとき。それでも300msのままです。しかし、jQueryをどうすればいいですか？

ありがとうございました！

$(document).ready(function() { 
    $('nav.container').children('ul').children('li').hover(function() { 
     if ($(this).find('.submenu').length > 0) { 
      $(this).find('.submenu').slideToggle(); 
     } 
    }, function() { 
     $(this).find('.submenu').delay(300).slideToggle(); 
    }); 
});

Here's a fiddleが働いて、それを表示する：

出典

2011-12-21 Mike Vierwind

hoverintent使用することができます。それらのうちの1つを最もよくチェックしてください –

何がありますか？何が良いですか？ –