title: Custom jQuery dropdown
body: <p>I am creating a custom simple dropdown using jQuery that hides/shows a element based on over state.</p>
  
  <p>The problem I have now is that when you go over the shown element it hides, you cant move your mouse in to the dropdown that was created.</p>
  
  <p>Any thoughts on how to fix that also, is there an easier way to do what I have? I am going to be reusing this and not sure the best way to set the code up for I dont need to copy/paste six times.</p>
  
  <pre><code>$(function(){
      $("#dog-nav").hover(
        function(){
          $(".sub-drop-box-dog").show("fast");
        }, 
        function(){
          $(".sub-drop-box-dog").hide("fast");
        }
      );
      $("#cat-nav").hover(
        function(){
          $(".sub-drop-box-cat").show("fast");
        }, 
        function(){
          $(".sub-drop-box-cat").hide("fast");
        }
      );
  
  });
  </code></pre>