javascript - jQuery メガ ドロップボックス メニュー

Question

私は現在、メガ ドロップボックス メニューに取り組んでいます。私の最初のアイデアは、LI をメニューとして使用し、メガメニューのコンテンツの DIV をどこかで定義することでした。

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

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

そして、このjQueryコード:

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

問題は、LI を離れて DIV スーパーメニューで何かを選択しようとすると、スーパーメニューが非表示になることです。これは想定内ですが、どうすれば回避できますか?

2 番目のアイデアは、メニューとスーパーメニューを 1 つの大きな DIV で設計することでした。

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

しかし、問題はまだ残っています。

この問題を解決する方法を教えてください。どうもありがとうございました。