如何使用(上)边距与CSS3下拉菜单

Question

我试图在CSS3中完全创建一个下拉菜单。在大多数情况下，我已经完成了我想要的，但由于某种原因，我似乎不能将margin-top: 10px;添加到下拉菜单，因为我不想让它触及主链接。当它碰到边缘的时候似乎会使悬停失效?

我在jsFiddle上张贴了一个没有页边距的工作示例:http://jsfiddle.net/J5QSv/

这是与margin-top: 10px;，不工作:http://jsfiddle.net/RastaLulz/J5QSv/2/

正如您所看到的，这工作得很好。然而，当你取消注释margin-top: 10px;时，它不再工作。

你知道解决这个问题的方法吗?还是一种变通?

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

一种解决方法是在悬停时为悬停元素添加高度，使该元素位于出现的元素的下方。您需要在顶层<li> s中添加一个类。

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

检查小提琴