html - css menu with jQuery effects control -

i if possible, have css menu adding jquery effects fade etc.

$('.main_menu li').hover(function() {     $(this).children('ul').hide().fadein(300); }, function() {     $(this).children('ul').stop(true, true).fadeout(200); }); 

so far things except small detail take care of. example if user moves mouse away submenu of submenu in order return first submenu there chance mouse pointer out of menu range @ least milliseconds , fades out whole menu. give delay or before javascript decides fade menu out, @ same time if mouse moves 1 submenu has submenus, not have delay. best way in particular case ?

have great day , in advance.

you can wrap fadeout effect timeout. careful 'this' keyword here. need store context:

$('.main_menu li').hover(function() {     $(this).children('ul').hide().fadein(300); }, function() {     // need keep context      var = this;      // set 100ms timeout     settimeout(function() {         // if use here refer         // function in timeout         $(that).children('ul').stop(true, true).fadeout(200);     }, 100); }); 

fiddle : http://jsfiddle.net/xexmw/