CSS:div置于ul之上

我有一个CSS问题，我似乎无法理解。 有一个带有

id=“header”

的div。下面有一个UL，这是我的下拉菜单。在这下面我有一个带链接的div

现在的问题是最后一个div没有显示，因为它位于UL下。我发现我可以用

边距顶部：29px

来解决这个问题，因为菜单栏有那个高度，但这不是最好的解决方案。我希望它是好的和未来的证明

我在Firebug中添加了2个可见的图像。正如您在第二张图中所看到的，最后一个div比菜单栏小，并且位于菜单栏下

希望有人能告诉我我错过了什么

编辑 我制作了一个jsfiddle来展示我现在得到的东西（很抱歉CSS包含了大量的菜单行）

原始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>  

使用z索引在堆栈上按特定顺序放置元素。更多信息：

---

如果您将

位置：绝对
从您的
ul.下拉列表中取下。它应该可以正常工作：

您能发布相关元素的css吗？（或者更好地说是小提琴）您是否也在使用display:none或display:hidden作为下拉菜单？您是否可以将HTML和CSS添加到文本中，而不是作为文本的图片？理想情况下，发布一篇文章。我在示例中添加了JSFIDLE。有一个id为=“header”的div。在这个HTML5语义标记的美妙时代，请使用
。非常感谢！确实如此。