SlideUp и Slidedown on hover menu

Question

У меня есть меню, которое покажет слайдер на hover(). Я написал, как этот

$(".menu2").hover(function() 
{ 
$(".slider").slideDown(500); 
    $(".slider").css('display','block');  
}, 
    function() { 
    $(".slider").slideUp(500);  
//$('.slider').css("display","none"); 

}); 

Это показывает ползунок. (Мне нравится использовать slideDown() и slideUp(), чтобы хорошо выглядеть). Когда я перемещаю свой cursor на ползунок, он возвращается к состоянию display:none. Так что я попробовал этот

$(".sliderHolder").hover(function() 
{ 
    $(".slider").css('display','block');    
}, 
    function() { 

$(".slider").slideUp(500); 

}); 

}); 

Это устанавливает мой ползунок display:none состояния после того, как я двигаю курсор из menu. Есть ли более простой способ сделать это?

Answer 1

Вы ожидали как

http://jsfiddle.net/jUraw/1369/

 <ul id="nav"> 
     <li><a href="home.html"><span>M</span>enu</a> 
      <ul> 
       <li><a href="fashion.html"><span>F</span>ashion</a></li> 
       <li><a href="about-us.html"><span>A</span>bout <span>U</span>s</a></li> 
       <li><a href="find-us.html"><span>F</span>ind <span>U</span>s</a></li> 
       <li class="underline"><a href="http://www.bellissimafashions.com/blog/"><span>B</span>log</a></li> 
      </ul> 
     </li>  
    </ul> 


$(document).ready(function(){ 
    var t = null; 
    $('#nav li').hover(function(){ 
     var that = this; 
     t = setTimeout(function(){ 
      $('ul', that).slideDown(200); 
      t = null; 
     }, 300); 
    }, function(){ 
     if (t){ 
      clearTimeout(t); 
      t = null; 
     } 
     else 
      $('#nav li ul').slideUp(200); 
    }); 
});