上下文菜单不显示子菜单

Question

在这个扑通中，我有一个菜单，当你点击画布时会显示出来。在“聚合”菜单项上方悬停时，右侧会出现第二个子菜单。

问题是，如果您从“聚合”中“鼠标退出”，然后再次输入，子菜单的位置将不再是它应该在的位置。这个密码怎么了？

HTML

  <div id="canvas" style="width:400px;height:400px;background-color:#ff33ff;"></div>

    <div id="menu1" class="context-menu">
      <ul>
        <li>
          <a href="javascript:void(0);">Display</a>
        </li>
        <li id="li1">
          <a href="javascript:void(0);">Aggregate</a>
        </li>
        <li id="li2">
          <a href="javascript:void(0);">Order by</a>
        </li>
        <li>
          <a href="javascript:void(0);">Group by</a>
        </li>
      </ul>
    </div>

    <div id="menu2" class="context-menu">
      <ul>
        <li>
          <a href="javascript:void(0);">Count</a>
        </li>
        <li>
          <a href="javascript:void(0);">Sum</a>
        </li>
        <li>
          <a href="javascript:void(0);">Average</a>
        </li>
      </ul>
    </div>

Javascript

$('#canvas').click(function(e) {

    var top = e.pageY;
    var left = e.pageX;

    $("#menu1").show();
    $("#menu1").offset({ top: top, left: left });

    $('#li1').mouseenter(function() {
          $("#menu2").offset({ top: top+20, left: left+120 });
            $("#menu2").show();
    });

    $('#li1').mouseleave(function() {
        $("#menu2").hide();
    });

    $('#menu2').mouseenter(function() {
            $("#menu2").show();
    });

    $('#menu2').mouseleave(function() {
            $("#menu2").hide();
    });

});

CSS

.context-menu {
  border:1px solid rgba(0,0,0,.15);
  background-color:#ffffff;
  padding:6px 0 0 0;
  display:none;
}
.context-menu ul {
  padding:0;
  list-style:none;
}
.context-menu li {
  background-color:#ffffff;
}
.context-menu li:hover {
  background-color:rgb(248,248,248);
}
.context-menu a {
  color:#333;
  text-decoration: none;
  line-height:24px;
  margin-left:20px;
}
#menu1{
  position:absolute;
  width:140px;
}
#menu2{
  position:absolute;
  width:100px;
}

Answer 1

尝试将offset替换为css。

我认为每次在offset上调用mouseenter时，它都会增加该菜单的当前位置。

使用css方法，将设置顶部和左侧位置，而不是添加到当前位置。

Answer 2

将这一行$("#menu2").offset({ top: top+20, left: left+120 });放在mouseenter函数之外，以避免在每次鼠标输入时执行它。

$('#li1').mouseenter(function() {
    //$("#menu2").offset({ top: top+20, left: left+120 });
    $("#menu2").show();
});

$("#menu2").offset({ top: top+20, left: left+120 });

小提琴