Ok, let's say I have a navigation system constructed in nested divs and I want to show sub-menu divs (and sub-sub-menu divs) when I do a mouseover on the menu div AND hide sub-menu divs (and sub-sub-menu divs) on a mouseout, or more precisely, when I mouseover a different menu div.
What would be the best way?
So far, here's what I've got :
<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>
Right now, everything is working (showing sub-menu and sub-sub-menus) when I mouseover the proper menu div. Now, where/when/how should I tell the script to do a slideUp of all .submenu and .sub_submenu when I do a mouseover of a different .menu div?
Thanks