CSS:div放在ul上

时间:2013-05-10 11:26:47

标签: css

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

现在的问题是没有显示最后一个div,因为它被放在UL下面。我发现我可以用margin-top:29px解决这个问题,因为菜单栏有这个高度,但这不是最好的解决方案。我希望它是好的和未来的证据。

我添加了2张图片,这些图片在Firebug中可见。正如您在第二张图片中看到的那样,最后一个div比菜单栏小,位于菜单栏下面。

希望有人可以告诉我我错过了什么。

css image from firebug1 css image from firebug2

修改 我已经制作了一个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>  

2 个答案:

答案 0 :(得分:3)

如果您从position:absolute取走ul.dropdown,它应该可以正常运行:

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

答案 1 :(得分:0)

使用z-index将元素按特定顺序放置在堆栈上。更多信息: http://coding.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/