SachiDangalla SachiDangalla - 1 month ago 5
CSS Question

Right click menu on svg

I implemented a right click menu for my app using JQuery but the list is indented to the right and the entire block is about 20px below. What causes it?

I'm using this code to implement right click menu : JSFiddle

<svg id="canvas" class="canvas" width="1800" height="500">
<rect class="ddd" id="ddd" x="0" y="0" width="300" height="200" fill="#D3DA7B" stroke="black"></rect>
</svg>

Answer

Just add to your <ul>:

padding: 0;
margin: 0;

Lists (both unordered and ordered) have padding and margin set by default. So you need to clear that.

https://jsfiddle.net/29xwpd2o/3/

Comments