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

[arwprod]

Добрый день, уважаемые!
Сел разбираться с 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.fade Out);
$(this).dequeue();
});
});
});
}
});
})(jQuery);

html конструкция:

<ul class="menu">
<li>
<a>1</a>
<ul class="sub">
<li><a href="#"><b>1.1</b></a></li>
<li><a href="#"><b>1.2</b></a></li>
<li><a href="#"><b>1.3</b></a></li>
<li><a href="#"><b>1.4</b></a></li>
<li><a href="#"><b>1.5</b></a></li>
</ul>
</li>
</ul>


Заранее спасибо за помощь.

[arwprod]

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

[inGray]

Есть замечательная функция toggle() (http://api.jquery.com/toggle/).

[arwprod]

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

[monolithed]

И для этого тоже есть замечательная функция hover() (http://api.jquery.com/hover/)

[inGray]

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

[arwprod]

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

(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);

[arwprod]

прошу прощения, не то скинул :Р
(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);

[arwprod]

Переписал скрипт, проверил в браузерах, не работает в 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);