Building menus and contextual event binding/unbinding

Building menus and contextual event binding/unbinding

I'm not sure I titled this correctly; I'm trying to build a custom menu. I know there are plenty of contrib menus that work, but without heavy modification, they won't in my application.  In the example I'm giving, I've really simplified things to avoid confusion and to hopefully make the answer simpler.
Given the following html. I would like like to write a script that makes the second DIV visible when hovering over the first DIV... OK, So far, that is easy. If I simply use .hover(), I can easily addClass to the second DIV and- when I move off the 1st DIV, the second DIV goes away... Easy. 

Now it gets sticky for me.  I want to continue to show the second DIV when I move the mouse from the first DIV to the second DIV.... But... I want to make the second DIV go away if I don't go first to the 2nd DIV. 

This is obviously a very common menu/submenu scenario.

One "hack" I think would probably work would be to wrap the whole mess in a container DIV and fire the classRemove when I move from that wrapper (which would cover both the newly exposed second DIV as well as the first).  This seems like a hack to me and I'm thinking there has to be a better way.


  1. <div id="menu">
  2.   <ul>
  3.     <li> 
  4.     <a href="#">link1</a></li>
  5.     <li><a href="#">link2</a></li>
  6.   </ul>
  7. </div>

  8. <div id="submenu" class="hidden"> 
  9.   <ul>
  10.     <li> 
  11.     <a href="#">sublink1</a></li>
  12.     <li><a href="#">sublink2</a></li>
  13.   </ul>
  14. </div>