union jquery on mouseenter

Question

I have a Nav that has a drop down sub menu. When the drop down appears i would like a union of menu + drop down like this:

so that if the mouse exits this entire block in pink, then the sub nav disappears. Currently, if the mouse exits only the drop down, the dropdown is gone. I saw this example but combining the class together did not work for me.

Here's MY FIDDLE

Answer 1

Why don't just remove the subClass from targets of both mouseenter AND mouseleave? Like this:

var animate;
$(".myClass").mouseenter(function () {
  clearTimeout(animate);
  $('.myClass').css('background-color','#777');
  $('.mySubClass').css('display','inline');
});
$(".myClass").mouseleave(function() {
  animate = setTimeout(function(){
    $('.myClass .mySubClass').css('display','none');
    $('.myClass').css('background-color','#49616a');
  }, 800);
});​

... as .myClass covered area IS already a union of menu and drop (as the corresponding element includes both link and dropdown menu).

I've fixed another potential bug here: it's possible to sequence mouseleave-mouseenter events too fast, then timeout function will fire even though it shouldn't (as the cursor stays in the menu area). To prevent this, an additional variable (animate) has been added; it stored the timeout in the mouseleave handler and clears it in the `mouseenter' one.