带有margin-top的下拉菜单

Question

我正在使用margin-top的下拉菜单。问题是，当我用我的鼠标从li下拉时，它会关闭。如何使其与margin-top一起使用？

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

从我的真实设计：

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

请帮助。

Answer 1

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

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

Answer 2

如果用额外的<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>

DEMO： http://jsfiddle.net/wGzj8/18/

Answer 3

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

Answer 4

这可以帮助您：http://jsfiddle.net/seyfollahi/qwL8P/

在#header_glavni_meni ul li .header_glavni_a {}

中添加高度

更改margin-top in：#header_glavni_meni ul li ul {}