I recently had a customer that wanted a somekind of drop down similar menu, but instead of dropping down it dropped up, and horizontally paralell to the menu, let me show you:

In order for the menu to work, my UL element was positioned absolutely in the main div of the page (it's a 800px wide div that is centered in the browser window). Everything worked nicely, in Firefox... as always IE had problems rendering the menu, the whole menu was off to the right by the width of the page. The whole style of the menu was very complex and delicated, so touching something could make the menu to stop working on Firefox, so it was a very painful process.

After an hour of trying stuff, I found a solution. I tried wrapping the menu in a relative positioned div container element. To my amaze that worked fine, the relative positioned div was properly inserted in the flow of the page, and the absolute positioned menu was positioned relatively to the container div, this is normally called an absolute-relative positioned element. Everything was nice, until I tried scrolling... to my horror, the thing was acting as position: fixed! (which IE doesn't support btw).

After a while of trying things, and almost deciding it was impossible, I decided to try adding position: relative to the body element of the page. Guess what? That worked! I don't know why, but that made the relative positioned div to start scrolling along with the page.

In conclusion my css for this ended being something like this:

body
{
position: relative;
}

div.menu
{
position: relative;
margin: 0px;

overflow: hidden;
}

ul.menu
{
position: absolute;

height: 37px;
width: 780px;

padding: 0px;
margin: 0px;

font-size: 1.1em;
list-style-type: none;

background-color: #a55e40;
}

Hopefully this explanation might save someone else sometime, personally the fact that the div was fixed in the browser window without scrolling was incredibly confusing for me.