如何修复元素的外观？

Question

任何人都可以帮我解决这个问题吗？

我写的代码：

$(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/

当li.submenu_f悬停我们看到了UL李UL，当li.submenu_s悬停我们看到了UL李ul li ul。它可以工作，但是当我添加到另外1个子菜单时 - 我发现问题。 叠加在一起的菜单..我无法解决这个问题。

Answer 1

第一件事，$(fsb)得到与.submenu_f课堂上的一切，所以不是$(fsb).find("ul").show()和$(fsb).find("ul").hide()，与$(this)取代$(fsb)，只获取悬停在li。

然后，你会希望ul li ul从一个li当你将鼠标悬停在另一个li，所以你应该只是隐藏在每个悬停所有ul li ul隐藏：

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

这里的工作小提琴：http://jsfiddle.net/4t1u0a2a/2/