jQueryでメニューのサブメニューのみを表示するには？

Question

私はいくつかのクラスを持っていますmenu-item。 menu-itemにマウスを重ねると、サブメニューが常に表示されます。 しかし、私たちが見る通り、sub-menuはid=menu-item-2292にしかありません。 menu-itemはsub-menuを持っている場合にのみ、私はsub-menuを表示することができますどのように

<ul class="menu" id="menu-menu-principal"> 
    <li class="menu-item" id="menu-item-2289"><a href="/about">À propos</a></li> 
    <li class="menu-item" id="menu-item-2292"> 
     <a href="/photos">Photos</a> 
     <ul class="sub-menu"> 
     <li class="menu-item" id="menu-item-2296"><a href="/portrait">Portrait</a></li> 
     </ul> 
    </li> 
</ul> 

？

Answer 1

$('.menu-item').hover(function(){ 
    var submenu = $(this).find('.sub-menu'); 
    if (submenu.length != 0) { 
    submenu.show(); 
    } 
}, function(){ 
    $(this).find('.sub-menu').hide(); 
}); 

Answer 2

選択したul

$(".menu-item").has('ul.sub-menu').hover(function() { 
    $('.sub-menu', this).show(); 
}, function() { 
    $('.sub-menu', this).hide(); 
});