Question

I am trying to create a drop down menu completely in CSS3. For the most part I have accomplished what I wanted, but for some reason I can’t seem to add margin-top: 10px; to drop down menu, as I don’t want it touching the main link. It seems to deactivate the hover when it hits the margin?

I have posted a working example with no margin on jsFiddle: http://jsfiddle.net/J5QSv/

This is with the margin-top: 10px;, and does not work: http://jsfiddle.net/RastaLulz/J5QSv/2/

As you can see, that works perfectly fine. However, when you uncomment margin-top: 10px; it no longer works.

Do you know a way to fix this? or a work around?

HTML

<span class="LinksMenu">
    <ul>
        <li>
            <a href="#">Account</a>
            <ul>
                <li><a href="#">Settings</a></li>
                <li><a href="#">Logout</a></li>
            </ul>
        </li>
    </ul>
</span>

CSS

body {
    padding: 10px;
    background: #F3F3F3;
}

a:link,a:visited { color:#000; text-decoration:none }
a:hover,a:active { color:#000; text-decoration:underline }

.LinksMenu {
    margin:0;
    padding:0;
    clear: both;
}

.LinksMenu ul {
    margin:0;
    padding:0;
}

.LinksMenu li {
    margin:0;
    padding:0;
    list-style:none;
    float: left;
    position: relative;
}

.LinksMenu ul ul li a {
    margin: 0;
    padding: 10px;
    width: 100px;
    display: block;
    text-shadow: 0;
    color: #000;
}

.LinksMenu ul ul {
    /* margin-top: 3px; */
    border: 1px solid #CCC;
    border-radius: 3px;
    background: #FFF;
    position: absolute;
    visibility: hidden;
}

.LinksMenu ul li:hover ul {
    visibility: visible;
}

Answer 1

One fix is to add height to the hovered element on hover, so the element is underneath the one that appears. You’ll need to add a class to the top level <li>s.

.LinksMenu ul li.myClass:hover{
    height: 80px;
}

Check the fiddle.