難以對齊我的下拉菜單，而不推動div內容

<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標籤中。難以對齊我的下拉菜單，而不推動div內容

我已經調整了菜單，使用戶覺得它是水平的，並且通過使用絕對值對其進行居中，因此在下拉菜單出現時不會將內容向下推。

但是，當我收縮瀏覽器時，即使標題和內容已停止，nav_cont仍會繼續移出屏幕。如果我使用相對或只是邊距：0 auto;它最大限度地減少了罰款，但我的問題是再次顯示下拉菜單時，它會推送內容。

我希望我有道理。謝謝。

來源

2011-01-19 Adam

嘗試設置位置：絕對內部下拉菜單，因此當您顯示它們不會將內容推下時

來源

2011-01-19 04:08:01 marman

難以對齊我的下拉菜單，而不推動div內容

回答

相關問題