Прыгающее меню на jQuery)))

[Jey Val Star]

Здравствуйте.

Есть сайт http://test.in-sites.ru/ 

У сайта выпадающее меню написанное на jQuery

$('.menu li').hover(        function(){ $('ul',this).slideDown(100); },        function(){ $('ul',this).slideUp(100); }     );

Работает хорошо, но при перемещении курсора с меню на подменю (особенно если вправо, или влево) то получается гадкий эффект подпрыгивания под.меню (пример пункт меню "О театре" -> под меню "Отзывы")

 

Подскажите пожалуйста в чем проблема

[antonKar]

1) лучше разделить события на mouseenter и mouseleave

2) если по-быстрому поправить, то используйте padding вместо margin

[Jey Val Star]

1) лучше разделить события на mouseenter и mouseleave

т.е. разделить hover на 2 отдельных события?

$('.menu li').mouseenter(function(){   $('ul',this).slideDown(100); });$('.menu li').mouseleave(function(){   $('ul',this).slideUp(100); }); 

[antonKar]

Ага, а потом сделать что-то типа такого

var timeoutMenu = false,    statusMenu = false;$('.menu > li').mouseenter(function(){    var $this = $(this);		if (statusMenu == $this.index() && timeoutMenu) {			clearTimeout(timeoutMenu);		timeoutMenu = false;			} else if (statusMenu != $this.index() && timeoutMenu) } {	    		$('.menu > li').eq(statusMenu).slideUp(300);			    clearTimeout(timeoutMenu);		statusMenu = $this.index();				$('.menu > li').eq(statusMenu).slideDown(300);	    	} else if (!status) {	    		statusMenu = $this.index();				$('.menu > li').eq(statusMenu).slideDown(300);			}});$('.menu > li').mouseleave(function(){    var $this = $(this);	    timeoutMenu = setTimeout( function() {	        $this.slideUp(300);		clearTimeout(timeoutMenu);		timeoutMenu = false;		statusMenu = false;    }, 1000)});