Custom jQuery highlighting

Question

I am creating a custom simple dropdown using jQuery which hides / shows an element based on redundancy.

Now the problem is that when you look at the displayed item that it hides, you cannot move the mouse pointer to the drop-down menu that was created.

Any thoughts on how to fix this, is there an easier way to do what I have? I am going to reuse this and am not sure if the best way to install the code for me is not 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");
      }
    );

});

Answer 1

You should use HTML as follows:

<div id="#menu">
  <ul>
    <li>
      <a href="#">Menu1</a>
      <ul>
        <li><a href="#">Submenu A</a></li>
        <li><a href="#">Submenu B</a></li>
        <li><a href="#">Submenu C</a></li>
      </ul>
    </li>
    <li>
      <a href="#">Menu2</a>
      <ul>
        <li><a href="#">Submenu D</a></li>
        <li><a href="#">Submenu E</a></li>
        <li><a href="#">Submenu F</a></li>
      </ul>
    </li>
  </ul>
</div>

And then jQuery like this:

$("#menu li").hover(function() {
  $(this).find("ul").show("fast");
}, function() {
  $(this).find("ul").hide("fast");
});

, , , . , .

Answer 2

, jQuery.hoverIntent / jQuery.superfish .