drop down sliding underneath content.. i have tried EVERYTHing.. :(

Question

Hey guys, ive been working on this drop down for wayyy to long now. I just cant get the drop down to fall on top of the main content on the page. I have tried adding position: relative and z-index on all relevant areas.

I think what may be causing the problem is "overflow: hidden" in some places.. but that is by far my favorite way to contain floats..

http://dev.redstoneinvestments.com/index.php?s=&p=redstone&v=home

Any suggestions?

Answer 1

change #header css to

#header {
    background-color:#FFFFFF;
    height:140px;
    width:900px;
}

that enough, it fixed the problem on my firefox.

Answer 2

Remove position: relative and overflow: hidden from both header and maincontent. If you need to clear the floats, use the clearfix method: http://net.tutsplus.com/tutorials/html-css-techniques/css-fudamentals-containing-children/ (this article specifically explains why clearfix is a better solution than overflow: hidden when you have absolutely positioned elements that need to extend outside the container).