title: how to not hide a li when moving mouse out of ul
body: <p>This code and problem must be familiar, but I have not found anything. Any help is appreciated.</p>
  
  <pre><code>$(document).ready(function(){
    $("ul.header1").children("li").hide();
  
    $('ul.header1').mouseenter(function(){
      $("ul.header1").children("li").slideDown("fast");
    });
  
    $('ul.header1').mouseleave(function(){
      $("ul.header1").children("li").delay(500).slideUp("fast");
    });
  
    $("li.sub").mouseenter(function(){
      $("ul.header1").css('background-color','red');
      $("ul.header1").stop();    
    });
  
    $("img.myClass").mouseenter(function(){
      $("ul.header1").css('color','red');
      $("ul.header1").stop();        
    });
  });
  </code></pre>