コンテキストメニューにサブメニューが表示されない

Question

このplunkには、キャンバスをクリックすると表示されるメニューがあります。 「集計」メニュー項目にカーソルを置くと、右に2番目のサブメニューが表示されます。

「集計」から「マウスを外して」もう一度入力すると、サブメニューの位置がもはや存在しなくなるという問題があります。このコードで何が問題になっていますか？

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

cssでoffsetを交換してみてください。

offsetがmouseenterで呼び出されるたびに、そのメニューの現在の位置に追加されると思います。 css方法を使用

は上部と左位置を設定する代わりに、現在の位置に追加します。

Answer 2

入力し、各マウスで実行することを避けるためにmouseenter機能外置き、この行$("#menu2").offset({ top: top+20, left: left+120 });を。

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

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

Fiddle