I have a sidebar in which there are certain `li` elements as an index, and on hover of each of the li elements, I have a specific image appearing 'over' the li elements (eg: `position:relative;top:-25px;`)

Let's say I hover over the first li element and the rollover images appears fine. However, the space between 1st and 2nd element increases while this hover is occuring. I am not able to understand why this is happening and I want to stop this from happening i.e. the image should appear over the `li` item without no spacing problem but only a simple rollover.

Here is a fiddle of the problem I am talking about: <http://jsfiddle.net/PF35v/3/>