How to fix the appearance of elements?

Question

Can anybody help me fix this problem?

I write code:

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

.categories {
    background: #fff;
    position: absolute;
    left: 47px;
    top: 54px;
    width: 303px;
    overflow: hidden;
}

.categories ul li ul {
    position: absolute;
    top: 0;
    left: 274px;
    padding-left: 50px;
    width: 215px;
    height: 100%;
    display: none;
}

.categories ul li ul li ul {
    position: absolute;
    display: inline-block;
    top: 0;
    left: 258px;
    width: 197px;
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="categories">
    <ul>
        <li><a href="#" title="">Электроника</a></li>
        <li><a href="#" title="">Бытовая техника</a></li>
        <li><a href="#" title="">Компьютеры</a></li>
        <li><a href="#" title="">Товары для дома</a></li>
        <li><a href="#" title="">Товары для авто</a></li>
        <li><a href="#" title="">Сад и огород</a></li>
        <li><a href="#" title="">Строительство и ремонт</a></li>
        <li>
            <a href="#" title="">Подарки и украшения</a>
            <ul>
                <li><a href="#" title="">Теле-видео-аудио техника</a></li>
                <li><a href="#" title="">Телефоны и связь</a></li>
                <li>
                    <a href="#" title="">Фото и видео</a>
                    <ul>
                        <li><a href="#" title="">Плиты</a></li>
                        <li><a href="#" title="">Вытяжки</a></li>
                        <li><a href="#" title="">Холодильники</a></li>
                        <li><a href="#" title="">Духовые шкафы</a></li>
                        <li><a href="#" title="">Варочные поверхности</a></li>
                        <li><a href="#" title="">Посудомоечные машины</a></li>
                        <li><a href="#" title="">Стиральные машины</a></li>
                        <li><a href="#" title="">Аксессуары</a></li>
                    </ul>
                </li>
                <li><a href="#" title="">Портативная электроника</a></li>
                <li><a href="#" title="">Прочая электроника</a></li>
                <li><a href="#" title="">Элементы питания</a></li>
            </ul>
        </li>
        <li><a href="#" title="">Парфюмерия и косметика</a></li>
        <li><a href="#" title="">Товары для детей</a></li>
        <li>
            <a href="#" title="">Доп. меню</a>
            <ul>
                <li><a href="#" title="">link 1</a></li>
                <li><a href="#" title="">link 2</a></li>
                <li>
                    <a href="#" title="">hover link 3</a>
                    <ul>
                        <li class="title">test</li>
                        <li><a href="#" title="">test link 1</a></li>
                        <li><a href="#" title="">test link 2</a></li>
                    </ul>
                </li>
                <li><a href="#" title="">link 3</a></li>
            </ul>
        </li>
        <li><a href="#" title="">Товары для спорта и отдыха</a></li>
        <li><a href="#" title="">Товары для животных</a></li>
        <li><a href="#" title="">Одежда и обувь</a></li>
        <li><a href="#" title="">Бытовая химия</a></li>
        <li><a href="#" title="">Фермерские товары</a></li>
    </ul>
</div>

OR: http://jsfiddle.net/wagwandude/6dWCg/18/

When hover on li.submenu_f we see ul li ul, when hover on li.submenu_s we see ul li ul li ul. It works, but when I add to 1 more submenu - I find problem. Menu superimposed on each other.. I can't fix this.

Answer 1

First thing, $(fsb) gets everything with class .submenu_f, so instead of $(fsb).find("ul").show() and $(fsb).find("ul").hide(), replace $(fsb) with $(this), which only gets the li that is hovered over.

Then, you will want the ul li ul from one li to hide when you hover over another li, so you should just hide all ul li ul on each hover:

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

Here's a working fiddle: http://jsfiddle.net/4t1u0a2a/2/