Question

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.

Answer 1

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/