Delay closure of a flyout submenu

JavaScript
1

I threw together a menu for a client based on his specifications, by editing a flyout menu I found in a tutorial, to appear as a drop down for the first level from a single “button”, then a flyout from the other sub levels. Yes, I know the actual appearance could be improved a bit :wink: it’s just a test sample page.

http://sky-web.net/vincent/example/example1b.htm

But if the user moves the mouse at a downward angle across to the flyout from the trigger, the flyout closes instantly.

Can anyone advise on how to delay the closure of the flyout, and as a possible extra, close it gradually when the user moves away from it, instead of it snapping shut.


$(document).ready(function($) {
		//Menu animation						
		$('#navList ul').css({display: "none"}); //Fix Opera
  		
		$('#navList li').hover(function() {
		$(this).find('a').stop().animate({'width' : "200"});
   		$(this).find('ul:first').css({visibility : "visible", display : "none"}).show(400);

  		}, function() {
    		$(this).find('ul:first').css({visibility : "hidden"}).hide(400);
   			$(this).find('a').stop().animate({'width' : "200"});
			});
		});

I know should really find the time to read the sitepoint book on jquery, especially as I bought the first edition, and then the second edition without reading the first one!