带有页边空白的下拉菜单 [英] Drop down menu with margin-top

问题描述

我正在使用边缘顶部的下拉菜单。问题是，当我用鼠标从li下来，它关闭。如何使用margin-top？

I'm working on a drop down menu with margin-top. The problem is, when I go with my mouse from li to drop down, it closes. How can I make it work with margin-top?

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

From my real design:

I've tried this solution: How to use (top) margin with CSS3 drop down menu? , but it moves the image under my ul down ("O fakulteti").

Help please.

解决方案

What if you wrap your sub menu with extra <div>? This <div> should have margin-top: 4px style instead of the same style you had for nested 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/

这篇关于带有页边空白的下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！