SachiDangalla SachiDangalla - 10 months ago 53
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 Source

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/