Check out this demo I created with a canvas menu. When you click on the canvas, a menu appears. Hover over the "Aggregate" option to reveal a second submenu on the right.
The issue arises when you mouse out of "Aggregate" and then hover back in – the position of the submenu shifts. Can you spot the error in the code?
Here is the 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>
And here's the 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();
});
});
Lastly, the 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;
}