Right click javascript context menu appears in wrong place

I have a very simple right click context menu in javascript using jquery, implemented using some ul elments.

The menu appears but always in the wrong place on the page. I have tried using offsets etc when setting the X and Y but it always appears out of place.

The blue square is where the right click took place but the menu appears below and right:

This is my snippet:

timelineRef.on('contextmenu', function(props) {
    props.event.preventDefault();
    var e = props.event;

    var x = e.pageX;
    var y = e.pageY; 

//  var x = e.pageX - e.currentTarget.offsetWidth;
//  var y = e.pageY - e.currentTarget.offsetHeight;


//   var y = e.clientY - e.currentTarget.offsetTop;
//   var x = e.clientX - e.currentTarget.offsetLeft;

     console.log(x);
     console.log(y);

     // Show contextmenu in the right position (the mouse)
     $wnd.jQuery('#custom-menu-id').finish().toggle(100).css({
         //position: "absolute",
             top: y + "px",
             left: x + "px"
     }).addClass("show");

});

The HTML is like this:

<ul class="{style.custom-menu}" id="custom-menu-id">
  <li data-action="abc">Edit</li>
  <li data-action="ayz">Select All</li>
</ul>

As you see I have tried many variations of setting x and y. I have the feeling it has to do with where the ul is in the page. It has many parents. If I make a simple jfiddle it works ok but then inside this complicated layout it doesn't.

Any help would be great. Thanks