Using .position with css position: relative not working as expected

Question

I have a menu that's not working right. have a look at this code: http://jsfiddle.net/PX9nU/1/

On #menu li , if I leave position: relative in place, the console records a left of 0 across all menu items when you hover. If I remove position: relative , it records the expected correct left value for each item.

I need the position: relative in place for the submenu to format correctly, but I need the left value to output correctly for some animation I'm trying to achieve.

-Why is the left not returning the expected value with position: relative in place?

-Is there another way to get the left value for each item as they are hovered over?

Answer 1

The problem is your jQuery selector. You're selecting with $('#menu li .item') , which gives you back the link elements. Calling position() on those gives their position within their parent element, the enclosing LI, which is 0,0 in each case. I think you want the position of the enclosing LI within its UL, which you can get this way:

p = $(this).parent().position();