How to show the context menu in actual position ?

Question

Hii all;

I am created a context menu inside my page; and it's working also fine but the problem is the context menu not showing exact position where i clicked; some time it showing below or some time far away from my clicked place.

Below is the code what i tried :-

<ul class='rightClick-menu'>
        <li data-action="Edit">Edit</li>
        <li data-action="Delete">Delete</li>
    </ul>

 Then in page i have div and inside the div when i clicked i want to show this context menu.

<div class='resize' style='width:500px;height:700px;border:1px solid black'>
</div>

 Now the Java Script code what i written is :-

$(".resize").bind("contextmenu", function (e) {//This method and just bellow mehthod "mousedown" both are used to open menu on r8clik of mouse.
                    debugger;
                    // Avoid the real one
                    var posx=0;
                    var poxy=0;
                    e.preventDefault();
                    mainDiv=$(this);
                    var offset = $(this).offset();
                    positionMenu(e);

                });
                $(".resize").bind("mousedown", function (e) {
                    debugger;
                    // If the clicked element is not the menu
                    DashletId = $(this).attr('data-value');
                    maindivid = $(this).attr('id');
                    mainDiv=$(this);
                    if (!$(e.target).parents(".rightClick-menu").length > 0) {

                        // Hide it
                        $(".rightClick-menu").hide(100);
                    }
                });

  function getPosition(e) {
            var posx = 0;
            var posy = 0;

            if (!e) var e = window.event;

            if (e.pageX || e.pageY) {
                posx = e.pageX;
                posy = e.pageY;
            } else if (e.clientX || e.clientY) {
                posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
                posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
            }

            return {
                x: posx,
                y: posy
            }
        }
        function positionMenu(e) {
            clickCoords = getPosition(e);
            var clickCoordsX = clickCoords.x;
            var clickCoordsY = clickCoords.y;
            var menu= document.querySelector(".rightClick-menu");
            menuWidth = menu.offsetWidth + 4;
            menuHeight = menu.offsetHeight + 4;

            windowWidth = window.innerWidth;
            windowHeight = window.innerHeight;

            if ( (windowWidth - clickCoordsX) < menuWidth ) {
                var leftMenu = windowWidth - menuWidth + "px";

            } else {
                leftMenu = clickCoordsX + "px";

            }

            if ( (windowHeight - clickCoordsY) < menuHeight ) {
                var menuTop = windowHeight - menuHeight + "px";

            } else {
                menuTop= clickCoordsY + "px";

            }
            $(".rightClick-menu").finish().toggle(100).css({top:menuTop,left:leftMenu});
        }

 CSS :-

.rightClick-menu {
    display: none;
    /*z-index: 1000;*/
    position: absolute;
    overflow: hidden;
    border: 1px solid #CCC;
    white-space: nowrap;
    font-family: sans-serif;
    background: #FFF;
    color: #333;
    border-radius: 5px;
}

So problem is not getting context menu in actual place where user clicked.

Any Idea how to solve this ?

Thanks.