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.