How to set custom right click menu on JavaScript

I am working on the Data Mapper tooling and came across the requirement to create custom right click menu for my container box, which was a rectangle in svg.

The result obtained after googling was quite satisfactory but there was some CSS problem. The loaded menu was slightly off the desired position, that is the block was about 20px below the desired position and the list elements were off to right.

After spending some time on StackOverflow, I found the cause of the problem and the solution. It was all in default CSS.

Lists (both unordered and ordered) have padding and margin set by default which was causing the undesired shifts. The default padding was meant for the bullet icons or numbering of list items. The simple solution was to set padding and margin to zero in the <ul> of the menu.

The complete solution is as follows: