Javascript jQuery mega dropbox菜单

我目前正在开发mega dropbox菜单。我的第一个想法是使用LIs作为菜单，然后在某处为megamenu的内容定义div：

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

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

问题是，当您离开LI并尝试在DIV超级菜单中选择某个内容时，超级菜单会被隐藏。这是可以预料的，但我怎样才能避免呢

第二个想法是在一个大分区中设计菜单和超级菜单：

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

但问题仍然存在

---

你能给我一个解决这个问题的建议吗。非常感谢。

尝试使用“mouseenter”和“mouseleave”事件而不是“hover”。“鼠标器”-表演。“鼠标悬空”-再次考虑后，检查是否超过div。。。为什么不把“#supermenu”放在“li”元素中呢？@mishik-会检查你的第二个想法。我目前正在尝试用CSS和HTML来完成。不使用Javascript。一切正常。但当我选择一个李，它是最大限度地牺牲了其他李。。。有人不知道为什么吗？有源代码：第二个李是不可见的菜单宽度的原因。

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