Having trouble aligning my dropdown menu without pushing the div content down - css

Question

<div id="header">
</div>
<div id="nav_cont">
<ul id="nav">
<li id="main_btn"><a class="mainlink" href="#">Parent 01</a></li>
<li id="communities_btn"><a class="mainlink" href="#" class="selected">Parent 02</a>
<ul>
<li>Item 01</li>
<li>Item 02</li>
<li>Item 03</li>
</ul>
<div class="clear"></div>
</li>
<li id="occupancy_btn"><a class="mainlink" href="#">Parent 03</a>
<ul>
<li>Item 04</li>
<li>Item 05</li>
<li>Item 06</li>
<li>Item 07</li>
</ul>
<div class="clear"></div>
</li>
<li id="resources_btn"><a class="mainlink" href="#">Parent 04</a></li>
<li id="about_btn"><a class="mainlink" href="#">Parent 04</a></li>
<li id="newsletter_btn"><a class="mainlink" href="#">Parent 04</a></li>
<li id="contact_btn"><a class="mainlink" href="#">Parent 04</a></li>
</ul>
<div class="clear"></div>
</div>
<div id="content">
</div>
#header{
border: 0px solid;
width:1024px;
margin: 0 auto;
}
#content{
border: 1px solid;
width:1024px;
height:400px;
margin: 0 auto;
}
#nav_cont{
position: absolute;
top:20px;
border:1px solid;
width:1024px;
left:50%;
margin-left:-512px;
}
I'll try to explain the best I can. I have a header div tag that holds the logo. Next, I have the nav_cont that is a menu with hidden drop down menus. Lastly, the rest of the content is in the content div tags.
I've aligned the menu to appear to the user that it is level and within by centering it using absolute, thus not pushing content down when the dropdowns appear.
However when I shrink the browser the nav_cont continues to move off screen even though header and content have stopped. If I use relative or just margin: 0 auto; it minimizes fine, but again my problem is that it pushes the content down when the dropdowns are shown.
I hope im making sense. Thanks.

Answer 1

Try setting position:absolute to inner dropdowns, so when you show them does not push content down