How do I get positioning to work correctly with lists / menu?
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 approximatly -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
I've created a test page where you can see the effects:
http://test.evju.biz/test/test_position.html
Can someone please help? :)