CSS3 transition for “top” and “left” properties not working

Question

I have a list with one item on the list transitioning to the northeast when I hover over it. Using margin-top and margin-left property transitions worked but the item being hovered over kept pushing other elements so I added position:relative and tried using top and left transition properties but it didn't seem to be working.

Here is the jsfiddle:

list hover

Answer 1

Have you tried setting the parent of your list. I know sometimes relative has issue unless the underlying item is also relative or absolute. Just a thought.

Answer 2

Add left, top default link demo

left: 0px

Answer 3

Use position:absolute and it will take it out of the normal document flow. You could also give it z-index:5 to make sure it floats over other elements.