Wie das Aussehen von Elementen zu beheben?

Question

Kann mir jemand helfen, dieses Problem zu beheben?

Ich schreibe 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/

Wenn schweben auf li.submenu_f sehen wir ul li ul, wenn schweben auf li.submenu_s wir ul li sehen Ulli Ul. Es funktioniert, aber wenn ich zu einem weiteren Untermenü hinzufüge - ich finde Problem. Menü übereinander gelegt .. Ich kann das nicht beheben.

Answer 1

Das erste, was, bekommt $(fsb) alles mit Klasse .submenu_f, so dass anstelle von $(fsb).find("ul").show() und $(fsb).find("ul").hide(), ersetzen $(fsb) mit $(this), die nur die li bekommt, die über schwebte wird.

Dann werden Sie die ul li ul von einem li zu verstecken, wenn Sie über einen anderen li schweben, so sollten Sie verstecken sie einfach alle ul li ul auf jedem schweben:

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

hier ein Arbeits Geige ist: http://jsfiddle.net/4t1u0a2a/2/