I am trying to build this icon driven interface with menu choices. There are two sets of icons. Parents and childs. When a parent is mouse overed, it displays corresponding set of childs wrapped in a <div> tag. I created parent.mouseover and child.mouseover and child.mouseout functions. It works fine, except for one problem. If a parent is hovered, then instead of hovering the child, the mouse is removed from the parent, then the child doesn't disappear - as it should, because there is no mouseout function for the parent. 

The problem is, if I create a mouseout for parent and hide the child in that function, then as soon as the mouse goes from the parent to child, the child disappears, even though I have child.show in the child.mouseover function. So - how can I hide the child when the mouse is removed from the parent, and also keep the child visible when the mouse goes from the parent to the child? Here are my functions:

2.         parent1.mouseover(function(){
3.             childs.hide(); //hide all the childs
4.             child1.show(1000);
5.         }) 
6.         child1.mouseover(function(){
7.             child1.show();
8.         })  
9.         child1.mouseout(function(){
10.             child1.hide();
11.         })
13.        parent1.mouseout(function(){
14.             child1.stop(true,true).delay(500).animate({opacity: "hide", top: "5"}, 3000); 
15.        }) - //This one causes trouble.

Any ideas? Thanks.