divの内容を押さずにドロップダウンメニューを整列させることに問題がありました。

Question

<div id="header"> 
<a href="#" id="logo"></a> 

</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><a href="#">Item 01</a></li> 
      <li><a href="#" class="selected">Item 02</a></li> 
      <li><a href="#">Item 03</a></li> 
     </ul> 
     <div class="clear"></div> 
    </li> 
    <li id="occupancy_btn"><a class="mainlink" href="#">Parent 03</a> 
    <ul> 
     <li><a href="#">Item 04</a></li> 
     <li><a href="#">Item 05</a></li> 
     <li><a href="#">Item 06</a></li> 
     <li><a href="#">Item 07</a></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; 
} 

私は可能な限り説明しようとします。私は、ロゴを保持するヘッダーdivタグを持っています。次に、私はnav_contを持っています。それは隠れたドロップダウンメニューを持つメニューです。最後に、残りのコンテンツはコンテンツのdivタグ内にあります。

私はメニューがレベルであり、絶対的にセンタリングすることでユーザーに表示されるように調整しました。したがって、ドロップダウンが表示されたときにコンテンツをプッシュしません。

しかし、ブラウザを縮小すると、ヘッダーとコンテンツが停止してもnav_contは画面から離れて動き出します。私が相対的またはちょうどマージンを使用する場合：0 auto;それは罰金を最小限に抑えますが、再び私の問題は、ドロップダウンが表示されたときに内容を押し下げることです。

私は意味があると思います。ありがとう。

Answer 1

絶対的な内側のドロップダウンを設定しようとしているので、表示するとコンテンツがプッシュダウンされない