Tworzę niestandardowe proste rozwijane za pomocą jQuery, który ukrywa / pokazuje element na podstawie stanu ponad.

Problem, który mam teraz, polega na tym, że kiedy przejdziesz przez pokazany element, który ukrywa, nie możesz przenieść myszy do listy rozwijanej, która została utworzona.

Jakiekolwiek przemyślenia, jak to naprawić, czy istnieje łatwiejszy sposób na zrobienie tego, co mam? Zamierzam to wykorzystać ponownie i nie jestem pewien, czy najlepszym sposobem na ustawienie kodu dla Nie muszę kopiować / wklejać sześć razy.

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

});