Problem creating an expandable vertical menu !

[songpham]

Hi , i have a problem creating an expandable vertical menu . I am writing it with Jquery .

The vertical menu has 3 tabs - one of which (the top tab) is always expanded
when the menu is not being hovered over.

When i hover on one of the menu tabs that is not expanded, i want that tab to expand upward. And when I unhover
(move th mouse away from the tab), i want tab to collapse back to orginal size. (And the top tab should the be expanded again.)

I want the outer size of the menu to be fixed. And i'm using animate slide to expand the menu tabs.

The menu i created works as described. But only if i move the mouse slowly to hover over a collapsed tab.

If i move the mouse quickly or even just move the mouse up and down the tabs more slowly, though, the whole thing "bounces" with the tabs going up and down. And the outer size of the menu changes (shrinks and expands upwards and downwards).

Can anyone suggest how i fix this problem?

PS: For example ... I know it's a photo slide gallery. But the main banner at http://anhduyhotel103.com/ uses hover with animate slide. And it does not "bounce" if the mouse is moved across the photos.

// menu right
	// hide all tab not activated 
	$("div.right .container .child").filter(':not(#active)').css("height","0px");
	// fade to
	$("div.right .container .parent").fadeTo('fast',0.5);
	$("div.right .container").hover(function(){	
			// if not activated will run
			if($(this).find(":first").attr('id')!='active')
			{
				// first : open close tab first
				$(this).parent().find(":first").find(":first").animate({height: "0px"}, {duration:'medium'});
				// after dropdown
				$(this).find(':first').animate({height: "100px"}, {duration:'medium'});
			}
			// sau đó fade lên
			$(this).find(':eq(1)').fadeTo('fast',1);
	},function(){
			//  close all activated
			$("div.right .container .child").filter(':not(#active)').animate({height: "0px"}, {duration:'medium'});
			// open tab activated
			$("div.right .container .child").filter('#active').animate({height: "100px"}, {duration:'medium'});
			
			$(this).find(':eq(1)').fadeTo('fast',0.5);
	});