I am creating a custom simple dropdown using jQuery that hides/shows a element based on over state.

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.

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.

$(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");
      }
    );

});