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

【问题标题】：CSS/HTML MENU: submenu disappearing on hoverCSS/HTML 菜单：子菜单在悬停时消失
【发布时间】：2015-04-24 14:26:42
【问题描述】：

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

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

【问题讨论】：

请将您的代码放入您的问题中。
当然会发生这种情况，因为 margin-bottom:10px 您添加到绝对定位的子菜单 ul ... 您需要使其在主菜单项和主菜单项之间没有“空格”子菜单，这样鼠标光标就可以从一个移动到另一个，中间没有任何“中断”，因为该中断会使主菜单项失去其悬停状态。
@CBroe 正是我一直在寻找但找不到的东西.. :) 谢谢..
@CBroe 我可以接受这个作为答案..

标签： html css

【解决方案1】：

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

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

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

Fiddle here

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

【讨论】：