CSS：div放在ul

Question

我有一個我似乎無法理解的CSS問題。 與id = "header"有一個div。在那裏有一個UL，這是我的下拉菜單。根據這一點，我有一個鏈接的div。

現在的問題是，最後一個div沒有顯示，因爲它被置於UL之下。我發現我可以用margin-top:29px來解決這個問題，因爲菜單欄有這個高度，但這不是最好的解決方案。我希望它是很好的和未來的證明。

我在Firebug中添加了2張圖片。正如你在第二張圖中看到的那樣，最後一個div小於菜單欄，並放在菜單欄下。

希望有人能告訴我我缺少的東西。

編輯 我已經做了的jsfiddle顯示什麼我現在得到了（我對包含大量行的菜單中的CSS抱歉） http://jsfiddle.net/Ecz4W/

原始HTML ：

<div id="header"> 
<h1 id="logo"><a href="/">Koffers4u</a></h1> 
<div id="navigation"> 
    <ul> 
     <li><a href="/">Home</a></li> 
     <li><a href="contact.php">Contact</a></li> 
    </ul> 
</div> 
</div> 
<ul class="dropdown dropdown-horizontal"> 
<li><a href="./" class="dir">Menu1</a> 
    <ul> 
     <li><a href="./">All</a></li> 
    </ul> 
</li> 
<li><a href="./" class="dir">Menu2</a> 
    <ul> 
     <li><a href="./">All</a></li> 
    </ul> 
</li> 
</ul> 
<div> 
<p> 
    <a href="http://www.cnn.com" target="_blank">cnn.com</a><br/> 
    <a href="http://www.cnn.com" target="_blank">cnn.com</a><br/> 
    <a href="http://www.cnn.com" target="_blank">cnn.com</a><br/> 
    <a href="http://www.cnn.com" target="_blank">cnn.com</a><br/> 
</p> 
</div> 

Answer 1

如果拿position:absolute關你ul.dropdown它應該正常工作：

http://jsfiddle.net/Ecz4W/1/

Answer 2

使用z-index來放置元素按照一定的順序在堆棧上。更多信息： http://coding.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/