why CSS dropdown menu makes content jump down? What fixes this?

Question

I am working on a pure CSS dropdown menu. (IE6 is not important to me right now.)

I have everything inside of a "wrapper" div for centering.

The page has 4 divs inside of "#wrapper" the first being "#topbar", the second the "#nav", the third a "#content" box and the fourth, a "#footer".

The "#content" and "#footer" divs have absolute positioning to stop them from jumping down when a submenu is exposed. This works in IE8 and Chrome and FF, but IE8;s compatibility mode show that IE7 will render the "#content" and "#footer" div off to the left of the centered column. Also, absolute positioning is used to keep the footer on the bottom of the page. removing it fixes the ie7 bug, but it causes everything to shift down when the submenus are exposed.

Is there a way to fix IE7's rendering of a left margin on the bottom divs without absolute positioning? or with it?

I prefer pure CSS.

EDIT:

Believe it or not, I'm using a bunch of span elements, not ul or div. Should I be using ul/li structure? I find it to be extra code.

Answer 1

Have you thought of leaving the divs positioned relative and having the submenu positioned absolute relative to it's container?

ul.menu li             { position:relative; overflow:auto; }    
ul.menu li ul.sub_menu { position:absolute; z-index:10; top:somePixelValueThatClearsTopListItem; }

Answer 2

If IE6 is not important, have you considered ignoring IE7 too?

Anyway, since you didn't post your codes, a quickfix will be to use IE conditional comments and place it below the rest of the CSS definitions/links.

<!--[if IE 7]>
<style type="text/css">
  .className {position: static;/*or relative*/}
</style>
<![endif]-->