要素の外観を修正するにはどうすればよいですか？

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_s上のホバーは、我々は、UL李を見たときli.submenu_f上のホバーは、我々は、ULのli ulのを、見たときul li ul。それは動作しますが、1つのサブメニューに追加すると問題が見つかります。 メニューが重なっています。私はこれを解決できません。

Answer 1

まず最初に、$(fsb)はクラス.submenu_fですべてを取得し、その代わりに$(fsb).find("ul").show()と$(fsb).find("ul").hide()の、唯一のオーバー推移しているliを取得した、$(this)で$(fsb)を交換してください。

あなたは、各ホバー上のすべてのul li ulだけ隠す必要がありますので、その後、あなたは、あなたが別のliにカーソルを合わせると1 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/