title: how to slow down listing hover effect using jquery
body: <p>i am a poor programmer can some 1 help me out with this problem.when i mouseover on "when you click here" rest of the <code>ul</code> slides down when i mouse out slide up up till here its working good .but when i mouseover on mu <code>ul</code> "we" text it needs to stay and when i mouse out from the text "we" it should slide up.but in my code when i mouseover on text "we" it stays when i mouse out it stays back insted of sliding up.can any one help me please.here is js fiddle for <a href="http://jsfiddle.net/LFKxF/" rel="nofollow">my code</a></p>
  
  <pre><code>&lt;script src="http://code.jquery.com/jquery-1.7.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.jquery.com/jquery-1.7.1.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  $(document).ready(function(){
  //alert('fdsafdasfdas');
  
  $("#aaaaa").mouseover( function() {
  //alert('ssss');
  var lis = $(this).next('ul').find('li');
  
  $(lis).each(function(index) {
  var li = $(this);
  
  setTimeout(function() {
  li.slideDown(1000);
  }, 10 * index);
  });
  });
  $("#aaaaa").mouseout( function() {
  //alert('ssss');
  var bu=$(this).next('ul').find('li');
  $(bu).each(function(index) {
  var bu1 = $(this);
  
  setTimeout(function() {
  bu1.slideUp(1000);
  }, 10 * index);
  });
  });
  
  $("#dropdown").mouseout( function() {
  //alert('out');
  var bu=$(this).next('ul').find('li');
  $(bu).each(function(index) {
  var bu1 = $(this);
  
  setTimeout(function() {
  bu1.slideUp(1000);
  }, 10 * index);
  });
  });
  
  
  
  $("#bag").mouseenter( function() {
      $("#aaaaa").mouseout( function() {
  //alert('opopopopopopo');
  var bu=$(this).next('ul').find('li');
  $(bu).each(function(index) {
  var bu1 = $(this);
  
  setTimeout(function() {
  bu1.stop(1000);
  }, 10 * index);
  });
  });
  //alert('ssss');
  setTimeout(function() {
  bu1.delay(5000);
  }, 10 * index);
  });
  $("#bag").mouseout( function() {
  var bu=$(this).next('li');
  $(bu).each(function(index) {
  var bu1 = $(this);
  
  setTimeout(function() {
  bu1.slideUp(1000);
  }, 10 * index);
  });
  });
  
  });
  
  &lt;/script&gt;
  #dropdown li {
  display:none;
  }
  &lt;div id="dropdown" style="width:200px; border:solid 1px #000;"&gt;
  
  &lt;div id="aaaaa"&gt;when you click here&lt;/div&gt;
  
  &lt;ul id="bag" style="width:200px;position:relative;top:-10px;"&gt;
  &lt;li id="bag"&gt;We&lt;/li&gt;
  &lt;li id="bag"&gt;We&lt;/li&gt;
  &lt;li id="bag"&gt;We&lt;/li&gt;
  &lt;li id="bag"&gt;We&lt;/li&gt;
  &lt;li id="bag"&gt;We&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>