jquery.position() isn't working correctly.

Question

I'm working on a menu system where I want a ul to show as a dropdown when the users does a mouseOver on li in another ul. I thought I'd use position to set the position of the dropdown (so it actually looks like a menu). What I want is the dropdown's top left corner to start at the same place as the bottom left corner of the wrapping listitem.

Unfortunately the positioning fails in several different ways:

• In Firefox it seems like the dropdown's are offset with approximately -100 25 pixels
• the first item in the list has a different offset on the left side compared to the other items
• The offset in IE is not the same as in FF
• Doing the positioning repeatedly in explorer results in different positions each time.

I've created a test page where you can see the effects: http://test.evju.biz/test/test_position.html

Answer 1

We've solved it by not using the jquery.ui.position. Here is the code we ended up using:

$(this).find("ul.subnav").first().css({
                left: $(this).position().left + 'px',
                top: ($(this).position().top + $(this).height()) + 'px'
            });