CSS: div 被放置在 ul 之上

Question

我有一个我似乎无法理解的 CSS 问题。有一个带有 id = "header" 的 div。在那下面有一个 UL，这是我的下拉菜单。在它下面我有一个带有一些链接的 div。

现在的问题是最后一个div没有显示出来，因为它放在了UL下面。我发现我可以用 margin-top:29px 来解决这个问题，因为菜单栏有那个高度，但这不是最好的解决方案。我希望它是好的并且面向 future 。

我在 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/