How do I get positioning to work correctly with lists / menu?

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? :)










    • Topic Participants

    • hp