Как исправить появление элементов?

Question

[wagwandude]

Доброе утро.

Написал скрипт для навигации:

$(document).ready(function() {

	var timer;
		tp = 500;
		cnav = ".categories";
		fsb = "li.submenu_f";
		ssb = "li.submenu_s";
	$(cnav).find("ul li:has(> ul)").addClass("submenu_f");
	$(cnav).find("ul li ul li:has(> ul)").attr("class","submenu_s");
    $(fsb).hover(function(){
    	clearTimeout(timer);
		$(cnav).css("width", "561px");
		$(fsb).find("ul").show();
    }, function(){
        timer = setTimeout(function () {
        	$(cnav).css("width", "303px");
            $(fsb).find("ul").hide();
        }, tp);
    });
    $(ssb).hover(function(){
    	clearTimeout(timer);
		$(cnav).css("width", "803px");
		$(ssb).find("ul").show();
    }, function(){
        timer = setTimeout(function () {
        	$(cnav).css("width", "561px");
            $(ssb).find(ul).hide();
        }, tp);
    });

});

jsfiddle.net/wagwandude/6dWCg/18

При наведении на li.submenu_f появляется ul li ul, а при наведении мыши на li.submenu_s появляется ul li ul li ul
Все было отлично, но потом я решил проверить дополнительные подменю и огорчился - они накладываются друг на друга, т.е. всё присваивается ко всему..
Понимаю, что нужно копать в направлении this, что я и делал, но к сожалению, полтора часа ушли на ветер.

Помогите разобраться с проблемой, заранее спасибо!

Answer 1

[wagwandude]

Проблема решилась:

$(fsb).hover(function(){
    $(fsb).find("ul").hide();
    clearTimeout(timer);
    $(cnav).css("width", "561px");
    $(this).find("ul").show();
}, function(){
    timer = setTimeout(function () {
        $(cnav).css("width", "303px");
        $(this).find("ul").hide();
    }, tp);
});  

$(ssb).hover(function(){
    $(ssb).find("ul").hide();
    clearTimeout(timer);
    $(cnav).css("width", "803px");
    $(this).find("ul").show();
}, function(){
    timer = setTimeout(function () {
        $(cnav).css("width", "561px");
        $(this).find("ul").hide();
    }, tp);
});