CSS / HTML MENU：子菜单在悬停时消失

Question

我在使悬停菜单工作时遇到问题。 当我将鼠标悬停在主菜单项上时，在子菜单下面的链接中出现。当我试图将鼠标悬停在子菜单上时，当我将光标移到子菜单上时它会消失。

A Fiddle

HTML

<div id='menu'>
    <ul>
        <li>
            <center><a href="#">Services</a>
            </center>
            <ul>
                <li><a href="#">Moving help ~ Deliveries</a>
                </li>
                <li><a href="#">Around the property</a>
                </li>
                <li> <a href="#"> Cleaning</a>
                </li>
                <li> <a href="#"> Minor Home Repairs</a> 
                </li>
                <li><a href="#"> Personal Care</a> 
                </li>
                <li><a href="#"> Skiller Handyperson</a>
                </li>
            </ul>
        </li>
        <li>
            <center> <a href='#'>company</a>
            </center>
            <ul>
                <li> <a href="about.php" class="firstli">About us </a>
                </li>
                <li> <a href="contact.php">Contact us </a>
                </li>
                <li> <a href="faq.php">F.A.Q. </a>
                </li>
                <li><a href="term.php">Terms of Use </a>
                </li>
                <li><a href="privacy.php" style="border-right:0px;">Privacy Policy </a>
                </li>
            </ul>
        </li>
    </ul>
</div>
</div>

CSS

#menu * {
    padding:0;
    margin: 0;
    font: 12px georgia;
    list-style-type:none;
}
#menu {
    margin-top:300px;
    background-color:none;
    float: left;
    line-height: 10px;
}
#menu a {
    display: block;
    text-decoration: none;
}
#menu a:hover {
}
#menu ul li ul li a:hover {
    padding-left:9px;
    border-left: solid 1px #000;
}
#menu ul {
    margin-bottom:10px;
}
#menu ul li ul li {
    width: 140px;
    border: none;
    color: #eee;
    padding-top: 3px;
    padding-bottom:3px;
    padding-left: 3px;
    padding-right: 3px;
    background:black;
}
#menu ul li ul li a {
    font: 11px arial;
    font-weight:normal;
    font-variant: small-caps;
    padding-top:3px;
    padding-bottom:3px;
}
#menu ul li {
    float: left;
    width: 146px;
    font-weight: bold;
    border-top: solid 1px #283923;
    border-bottom: solid 1px #283923;
}
#menu ul li a {
    padding-left: 15px padding-right: 10px;
}
#menu li {
    position:relative;
    float:left;
}
#menu ul li ul, #menu:hover ul li ul, #menu:hover ul li:hover ul li ul {
    display:none;
    list-style-type:none;
    width: 140px;
}
#menu:hover ul, #menu:hover ul li:hover ul, #menu:hover ul li:hover ul li:hover ul {
    display:block;
}
#menu:hover ul li:hover ul li:hover ul {
    position: absolute;
    margin-top: -22px;
    font: 10px;
}
#menu:hover ul li:hover ul {
    position: absolute;
    margin-top: 1px;
    font: 10px;
    bottom:100%;
}

Answer 1

问题是你的内部列表有底部边距，因此它与父li元素分开：

如果你想保留空间，可以使用：

#menu ul {
    padding-bottom: 20px;
    margin-bottom: 0;
}

<强> Fiddle here

结果是两者之间没有差距，我们不会失去:hover状态：