jQuery mega dropbox menu

I am currently working on mega dropbox menu. My firt idea was to use LIs as a menu and then somewhere define DIVs for content of megamenu:

<ul>
    <li class="menu" id="test_menu">Test</li>
</ul>

<div id="test_supermenu">
  <!-- Content here -->
</div>

And this jQuery code:

jQuery(document).ready(function() {
  jQuery("li.menu").hover(function() {
    jQuery("#test_supermenu").position({
      my: "center",
      at: "bottom",
      of: "#test_menu"
    });
    jQuery("#test_supermenu).show();
  }, function() {
    jQuery("#test_supermenu).hide();
  });
});

The problem is that when you leave the LI and try to select something in DIV supermenu, the supermenu get hidden. It is expectable, but how can I avoid it?

The second idea was to design the menu and supermenu in one big DIV:

<div id="menu">
   <a href="">Test</a>
   <div id="supermenu">
     <! -- Content here -->
   </div>
</div>

But the problem is still there.

Could you please give me a suggestion how to solve this problem. Thank you very much.