Html 光标近目标检测

我有以下html：

<style>
   #menu-container
   {
       width: 100%;
       height: 40px;
       // used to detect hover 
   }

   .menu
   {
       border: 1px solid black;
       width: 300px;
       height: 20px;

       margin-top: -100px; // hidden
   }

   .menu-visible
   {
       margin-top: 0px; // visible
   }
</style>

<script>
   $("#menu-container").mouseenter(
       function()
       {
           $(".menu").toggleClass('menu-visible');
       }
   );
</script>

<div id="menu-container">
   <div class="menu">

   </div>
</div>

#菜单容器
{
宽度：100%；
高度：40px；
//用于检测悬停
}
菜单
{
边框：1px纯黑；
宽度：300px；
高度：20px；
页边距顶部：-100px；//隐藏
}
.菜单可见
{
页边距顶部：0px；//可见
}
$（“#菜单容器”）.mouseenter(
函数（）
{
$（“.menu”）.toggleClass（'menu-visible'）；
}
);

菜单包装的高度是+20px，这是我“检测”运动的额外空间

目标：当光标靠近菜单（而不是在菜单上方）时，菜单必须显示

问题：一切都很好，只是我不能点击菜单容器下的内容（额外的20px空间）

---

有什么建议吗？谢谢

通过执行以下操作，您可以在不使用javascript的情况下实现相同的效果：

#menu-container {
  width: 100%;
  height: 40px;
  padding: 20px;
}

#menu-container:hover .menu {
  margin-top: 0px; // visible
}

.menu{
  border: 1px solid black;
  width: 300px;
  height: 20px;

  margin-top: -100px; // hidden
}

---

在此预览：

Give

overflow:hidden至
#菜单容器