Как скрыть (скрыть) дочерние divs в JQuery?

Question

Хорошо, допустим, у меня есть навигационная система, построенная во вложенных div, и я хочу показать подменю divs (и sub-sub-menu divs), когда я наводил курсор на div меню и скрывал подменю divs (и под-подменю) на мыши, или, точнее, при наведении мыши на другое меню div.

Что было бы лучшим способом?

До сих пор, вот что я получил:

<script type="text/javascript"> 

$('.menu').mouseover(function(){ 
     $(this).children(".submenu").each(function(i){ 
     $(this).delay(1000).slideDown("slow"); 

$(this).mouseover(function(i){ 
$(this).children(".sub_submenu").each(function(i){ 
     $(this).delay(1000).slideDown("slow"); 

}); 
}); 
</script> 


<div id="" class="menu"> 
menu1 
<div id="" class="submenu"> 
submenu11 
<div id="" class="sous_sousmenu"> 
sub_submenu111 
</div> 
<div id="" class="sub_submenu"> 
sub_submenu112 
</div> 
</div> 
<div id="" class="submenu"> 
submenu12 
</div> 
</div> 
<div id="" class="menu"> 
<a href="#">menu2</a> 
<div id="" class="submenu"> 
sousmenu21 
</div> 
<div id="" class="submenu"> 
submenu22 
<div id="" class="sub_submenu"> 
sub_submenu21 
</div> 
</div> 
</div> 

Прямо сейчас, все работает (показывать подменю и суб-суб-меню), когда я наведите курсор мыши правильный DIV меню. Теперь, где/когда/как я должен указывать скрипту делать слайд-эффект для всех .submenu и .sub_submenu, когда я накладываю указатель мыши на другой .menu div?

Благодаря

Answer 1

попробовать что-то вроде этого (demo):

HTML

<div id="" class="menu"> 
    menu1 
    <div id="" class="submenu"> 
     submenu11 
     <div id="" class="submenu"> 
      sub_submenu111 
     </div> 
     <div id="" class="submenu"> 
      sub_submenu112 
     </div> 
    </div> 
    <div id="" class="submenu"> 
     submenu12 
    </div> 
</div> 
<div id="" class="menu"> 
    <a href="#">menu2</a> 
    <div id="" class="submenu"> 
     sousmenu21 
    </div> 
    <div id="" class="submenu"> 
     submenu22 
     <div id="" class="submenu"> 
      sub_submenu21 
     </div> 
    </div> 
</div> 

Script

$('.menu, .submenu').hover(function(){ 
    $(this).children('.submenu').stop(true, true).slideDown("slow"); 
}, function(){ 
    $(this).children('.submenu').stop(true, true).delay(1000).slideUp("slow"); 
});