How to use (top) margin with CSS3 drop down menu?

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;
}

Answers


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.


Need Your Help

htaccess 301 redirect rule

.htaccess redirect

I'm looking for help with making a 301 redirect for:

Where should I put my log file for an asp.net application?

asp.net logging permissions

I have a ASP.NET application that we've written our own logging module for.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.