Сделать выпадающее меню отображается при наведении с таймаутом

Question

Недавно я сделал эту простую навигацию, где у вас есть несколько ссылок, имеющих выпадающее меню. Сначала это было только в CSS3, но потом я решил добавить некоторый jQuery, чтобы выпадающее меню появилось через определенное время. (Большая часть кода jQuery основана на ответе, указанном в другом потоке)

В принципе, моя проблема в том, что я не могу настроить таргетинг на правый элемент, поэтому, когда я нахожу элемент li, появляется всплывающее окно. Я попробовал настроить его как можно больше, но я не могу найти нужный фрагмент кода.

Любой ответ приветствуется!

Мое меню выглядит следующим образом:

<ul id="generale"> 
       <li><a href="#">Item 1</a></li> 
       <li><a href="#">Item 2</a></li> 
       <li> 
        <a href="#">Item 3</a> 
        <ul> 
         <li><a href="#">Subitem 1</a></li> 
         <li><a href="#">Subitem 2</a></li> 
         <li><a href="#">Subitem 3</a></li> 
         <li><a href="#">Subitem 4</a></li> 
         <li><a href="#">Subitem 5</a></li> 
        </ul>  
       </li> 
       <li> 
        <a href="#">Item 4</a> 
        <ul> 
         <li><a href="#">Subitem 1</a></li> 
         <li><a href="#">Subitem 2</a></li> 
         <li><a href="#">Subitem 3</a></li> 
         <li><a href="#">Subitem 4</a></li> 
         <li><a href="#">Subitem 5</a></li> 
        </ul> 
       </li> 
       <li><a href="#">Item 5</a></li> 
       <li><a href="#">Item 6</a></li> 
      </ul> 

и мой JQuery:

var navTimers = []; 
      $("#generale > li").hover(
       function() { 
        var id = jQuery.data(this); 
        var $this = $(this); 

        navTimers[id] = setTimeout(function() { 
         $('#generale ul').fadeIn(200); 
         navTimers[id] = ""; 
        }, 300); 
       }, 
       function() { 
        var id = jQuery.data(this); 
        if (navTimers[id] != "") { 
         clearTimeout(navTimers[id]); 
        } else { 
         $('#generale ul').fadeOut(200); 
        } 
       } 
      ); 

Answer 1

Ваши функции FadeIn и FADEOUT в настоящее время нацеливание все ul сек в пределах #generale элемента.

Try изменения

$('#generale ul').fadeIn(200); 

в

$this.find('ul').fadeIn(200); 

и

$('#generale ul').fadeOut(200); 

в

$this.find('ul').fadeOut(200); // you'll also have to define $this = $(this)