title: SlideUp and Slidedown on hover menu
body: <p>I am having a menu which will show a  slider on <code>hover()</code>. I have written it like this</p>
  
  <pre><code>$(".menu2").hover(function ()
  {
   $(".slider").slideDown(500);
    $(".slider").css('display','block');      
  },
      function () {   
      $(".slider").slideUp(500);      
   //$('.slider').css("display","none");
  
  });
  </code></pre>
  
  <p>This shows the slider.(I like to use <code>slideDown()</code> and <code>slideUp()</code> to look good). When I move my <code>cursor</code> to the slider it goes back to the <code>display:none</code> state. So I tried this</p>
  
  <pre><code> $(".sliderHolder").hover(function ()
  {
    $(".slider").css('display','block');              
  },
      function () {
  
   $(".slider").slideUp(500);
  
   });
  
  });
  </code></pre>
  
  <p>This sets my slider to <code>display:none</code> state after I move my cursor from the <code>menu</code>. Is there an easier way to do this though? </p>