Custom jQuery dropdown

Question

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

});

Answer 1

You should use HTML like this:

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

Then when you hover over the submenus, you actually still hover over the main menu and then it will not close. The above example is also flexible, so you don't have to write it once for each menu.

Answer 2

To accommodate mouse piloting error, you should check out jQuery.hoverIntent and/or jQuery.superfish plugins.