title: How do I get this jQuery script to work
body: <p>I have a bit of jQuery code I am trying to get to work here. I basically have a vertical nav menu with two items that have jQuery dropdown menus that pop out to the side. However, when you hover over them both quickly they are displayed overlapping each other. So what I am trying to accomplish is that if one is hovered on and pops out, if the other one is already displayed it will slideUp and be hidden. The dropdown trucks already existed I am adding on the engines one. I will keep working on it but if anyone can help out I would appreciate it.</p>
  
  <pre><code>/* Dropdown Menu Trucks*/
  $("#menu-main-menu .show-dropdown").hover(function(){
      $("#dropdown").slideDown('fast');
  });
  
  $("#dropdown").mouseenter(function(){
      $("#dropdown").show();
  });
  
  $("#dropdown").mouseleave(function(){
      $("#dropdown").slideUp('fast');
  });
  
  // ----------------------------
  
  /* Dropdown Menu Engines */
  $("#menu-main-menu .show-dropdown2").hover(function(){
      $(".dropdown-engines").slideDown('fast');
  });
  
  $(".dropdown-engines").mouseenter(function(){
      $(".dropdown-engines").show();
  });
  
  $(".dropdown-engines").mouseleave(function(){
      $(".dropdown-engines").slideUp('fast');
  });
  
  if ($('#dropdown').is(':visible')) {
      $(".dropdown-engines").slideUp();
  }
  else if ($('.dropdown-engines').is(':visible')) {
      $("#dropdown").slideUp();   
  }
  </code></pre>
  
  <p>edit: let me approach this another way that seems easier to accomplish.. </p>
  
  <pre><code>$("#menu-main-menu .dropdown2").hover(function(){  // hover over .dropdown2 
                                                     // show #dropdown-engine
      $("#dropdown-engine").slideDown('fast');
  });
  
  $("#dropdown-engine").mouseenter(function(){      // mouse enter #dropdown-engine
                                                    // show #dropdown-engine
      $("#dropdown-engine").show();
  });
  
  $(".dropdown2" || "#dropdown-engine").mouseleave(function(){
  
      $("#dropdown-engine").slideUp('fast');       // mouse leave #dropdown-engine
                                                   // *or .dropdown2 slideup
  });                                              // but only if not hovering on either
  </code></pre>