带边距顶部的下拉菜单答案

【问题标题】：Drop down menu with margin-top带边距顶部的下拉菜单
【发布时间】：2012-06-14 22:56:58
【问题描述】：

我正在制作一个带有顶部边缘的下拉菜单。问题是，当我将鼠标从 li 下拉到下拉时，它会关闭。如何使其与 margin-top 一起使用？

http://jsfiddle.net/wGzj8/8/

来自我的真实设计：

我已经尝试过这个解决方案：How to use (top) margin with CSS3 drop down menu?，但它会将我的 ul 下的图像向下移动（“O fakulteti”）。

请帮忙。

【问题讨论】：

标签： jquery css

【解决方案1】：

如果你用额外的<div> 包裹你的子菜单怎么办？这个<div> 应该有margin-top: 4px 样式，而不是嵌套ul 的样式：

<li>
    <div class="header_meni_crta"></div>
    <a class="header_glavni_a">O fakulteti</a>
    <div style="margin-top: 4px;">
        <ul style="display: none;" class="dropdown_levo" style="margin-top: 0;">
            <li><a href="#">Vizitka</a></li>
            <li><a href="#">Vodstvo</a></li>
            <li><a href="#">Organi</a></li>
            <li><a href="#">Zaposleni</a></li>
            <li><a href="#">Organiziranost in enote</a></li>
            <li><a href="#">Akti in pravilniki</a></li>
        </ul>
    </div>
</li>

演示： http://jsfiddle.net/wGzj8/18/

【讨论】：

嗨，下拉菜单现在可以正常工作，但这发生在我的设计中：(oi45.tinypic.com/pvxmx.jpg)
我添加了 margin-top: -4px;在我的图像上，所以它上升了，现在效果很好。所有的答案都是正确的，但我选择这个是正确的，因为它是第一个。谢谢大家！

【解决方案2】：

只需使顶级列表元素稍高一点，以便它们与导致问题的边距之间的区域重叠，您可以添加 4px 的底部填充来实现这一点。在这里更新小提琴：http://jsfiddle.net/wGzj8/22/

【讨论】：

【解决方案3】：

这应该对你有帮助：http://jsfiddle.net/seyfollahi/qwL8P/

添加高度：#header_glavni_meni ul li .header_glavni_a {}

更改边距顶部：#header_glavni_meni ul li ul {}

【讨论】：

【解决方案4】：

在选择器中添加margin-bottom以下代码，

#header_glavni_meni ul li .header_glavni_a {
  margin-bottom:10px;
}

【讨论】：

嗨，同样的事情发生在我在第一个答案中评论过的图像上。
嗯，看看给你的图片添加一个负边距是否会让它恢复原状。