Затык с мини плагином меню
 

Добрый день, уважаемые!
Сел разбираться с jquery и решил попробывать написать собственный плагин jquery.

Собственно, суть плагина простая, при наводке на элемент ul>li списка, раскраывается вложенный ul>li список, убираем мышку, этот список пропадает... Но вот затык: после того, как мы убрали курсор и пытаемся навести на этот же элемент снова, плагин не срабатывает.

Это мой первый опыт, по-этому не судите строго ^_^'
Код плагина:

(function($){ 
	var options = $.extend({
		fadeIn: 'slow',
		fadeOut: 'slow'
	},options);
	
	$.fn.extend({  
		jenvitMenu: function() {
			return this.each(function(){
				jQuery(this).find('ul')
					.css('display','none');
   				$(this).children().mouseover(function(){
					$(this).queue(function(){
    					$(this).children().fadeIn(options.fadeIn);
						$(this).dequeue();
					});
				}).mouseleave(function(){
					$(this).queue(function(){
						$(this).children().children().fadeOut(options.fadeOut);
					$(this).dequeue();
					});
    			});
			});
		}	
	}); 
})(jQuery);

html конструкция:
Заранее спасибо за помощь.

кажется озарило... нужен какой-то триггер и в зависимости от него показывать либо скрывать элементы...

Есть замечательная функция toggle().

Тугл на сколько я понял работает только при клике =\ а хотелось при наводке...

И для этого тоже есть замечательная функция hover()

"Все уже украдено до нас" © Ю.Никулин

Получилась вот такая штука. Буду рад выслушать советы, заранее спасибо))

(function($){ 
	var options = $.extend({
		fadeIn: 'slow',
		fadeOut: 'fast'
	},options);
	
	$.fn.extend({  
		jenvitMenu: function(){
			jQuery(this).find('ul')
					.css('display','none');
			
			return this.each(function(){
   				$(this).children().hover(
					function(){
						self = $(this).children().eq(1);
						self.addClass('trigger');
						if(self.hasClass('trigger')) {
							self.fadeIn(options.fadeIn);
						}
					}, 
					function(){
						self.removeClass('trigger');
						if(!self.hasClass('trigger')) {
							self.fadeOut(options.fadeOut);						
						}
    				}
				);
				$(this).children().eq(1).each(function(){
					
				});
			});
		}	
	}); 
})(jQuery);

прошу прощения, не то скинул :Р

(function($){ 
	var options = $.extend({
		fadeIn: 'slow',
		fadeOut: 'fast'
	},options);
	
	$.fn.extend({  
		jenvitMenu: function(){
			$(this).find('ul')
					.css('display','none');
			
			return this.each(function(){
   				$(this).children().hover(
					function(){
						self = $(this).children().eq(1);
							self.fadeIn(options.fadeIn);
					}, 
					function(){
							self.fadeOut(options.fadeOut);
    				}
				);
			});
		}	
	}); 
})(jQuery);

Переписал скрипт, проверил в браузерах, не работает в IE и Opera =\ Есть ли какие-то хаки, как в css или еще что?))) Подскажите что делать, заранее спасибо.

(function($){ 
	var options = $.extend({
		fadeIn: 'slow',
		fadeOut: 'fast',
		triggerClass: 'some_ave_class_for_jenvit_menu'
	},options);
	
	$.fn.extend({  
		jenvitMenu: function(){
			
			$(this).find('ul').css('display','none');
			
			return this.each(function(){
   				$(this).find('li').hover(function(){
					self = $(this).children().next();
					if(!$(this).hasClass(options.triggerClass)){
						$(this).addClass(options.triggerClass);
						self.fadeIn();
					} else {
						self.css('display','block');
					}
						self.hover(function(){
							$(this).css('display','block');
						});
				},function(){
					$(this).removeClass(options.triggerClass);
					$(this).children().next().fadeOut();
    			});
			});			
		}	
	}); 
})(jQuery);