Html 使下拉式菜单在不悬停时保持不变

我找到了一个制作下拉菜单的指南，上面说当你停止在主菜单项上悬停时，下拉菜单将保持不变。然而，我的菜单消失了，无法按这些项目

正如您所看到的，是音乐菜单位具有下拉菜单（或者在本例中为“drop right”）

在这里拉小提琴：

代码如下：

HTML:

---

你的css需要倾注很多。所以我把它归结为基本的问题。我相信您的问题与主链接和子菜单之间的间隙有关

CSS的解释 *锚定是块内联块类型，具有父li和ul的精确宽度。 *子菜单在李的内部。因此，当李的鼠标悬停在上方时，它们是可见的。子菜单可见，因为它是li的子菜单。 *因为锚定是100%并拉伸li，所以在将鼠标移动到子菜单上时，没有间隙，因此子菜单保持可见

---

我在弹出的列表中添加了一些填充，基本上在列表周围创建了一个块。当你的鼠标在那个街区时，它不会消失

然而，有一个问题是，画的圆圈被放在列表的上方，但我将把这个问题留给你

---

不过，我更喜欢丹尼尔的解决方案。给链接自己的类是一个更好的处理方法。您最好看看他的解决方案，并根据您的需要进行调整。

问题在于您的子列表是偏移的，因此光标必须从主菜单项和子菜单穿过死区。这将解决您的问题：

#menubox ul li:hover ul
{
    left: 0;
    top: 0;
    z-index:100;
}

正如Daniel Gimenez在上面解释的那样，子菜单之所以保持可见是因为它是主ul项的子菜单，因此如果您将光标保持在子菜单上，浏览器也会将其视为将光标保持在原始菜单项上，并且：hover css保持不变

---

它对于下拉/弹出菜单非常有效，因为即使子对象实际显示在其父对象的外部，从代码的角度来看，它仍然“在”父对象的内部。但是，如果两者之间存在任何物理间隙，并且鼠标越过该间隙，则：hover规则将被禁用，子菜单将消失。

@echoloaction，我更喜欢您的解决方案（我认为您指的是我，而不是询问者）。有时候，只要让一些东西发挥作用就足够了。你真的解决了他问的问题+1@DanielGimenez是的，我是说你，看错名字了。我的答案是快速修复，但通常鼓励使用类，特别是如果他进入子菜单，并变得更复杂，这就是为什么我更喜欢你的菜单。感谢你们，echolocation和@danielgimenez！不幸的是，我不能让所有的答案都正确。RelIC180是最简单的（两行代码不同于我自己做的），但我一定会检查你的答案，并考虑这样做。@阿恩施泰因高兴的为你解决了。你可能想考虑添加一些填充物，这样你就不必把鼠标放在文本上，并且有一点回旋余地。修正了我的问题，我的菜单消失了。

#menubox
{
    width: 8%;
    height: 30%;
    border: 10% solid #C7D93D;
    border-radius: 5%;
    position: fixed;
    margin-top: 12%;
    margin-left: 18%;
    font-family: Ubuntu, Lucida console, Futura;
    list-style: none;
    float: left;
}


#menubox ul li a
{
    text-align: left;
    font-size: 200%;
    color: #FFF0A5;
}

#menubox ul li
{
    color: #468966;
    font-family: Ubuntu, Lucida console, Futura;
    float: left;
    margin-right: 10px;
    position: relative;
}

#menubox ul
{
    color: #468966;
    font-family: Ubuntu, Lucida console, Futura;
}

#menubox ul ul
{
    position: absolute;
    left: -9999px;
    list-style: none;
}

#menubox ul ul li
{
    float: left;
    margin-left: 40%;
    position: relative;
    font-size: 60%;
    text-align: left;

}

#menubox ul ul a
{
    white-space: nowrap;
}

#menubox ul li:hover a
{
    text-decoration: none;
    color: #FFB03B;
} 

#menubox ul li:hover ul
{
    left: 0;
}

#menubox ul li:hover ul a
{
    text-decoration: none;
    color: #FFB03B;
}

#menubox ul li:hover ul li a:hover
{
    color: #FFB03B;
}


div p
{
    color: #FFF0A5;
    text-align: center;
    position: relative;
    vertical-align: middle;
    display: inline-block;
    margin-top: 300px;
    line-height: 60px;
}


#circle
{
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    background-color: #B64926;
    width: 500px;
    height: 500px;
    display: block;
    position: fixed;
    margin-top: 9%;
    margin-left: 52%;
    text-align: center;
}

#title
{
    text-color: #FFF0A5;
    font-size: 350%;
    display: inline;
    text-align: center;
}

body
{
    height: 100%;
    width: 100%;
    background-color: #468966;
    font-family: Ubuntu, Lucida console, Futura;
}

.link
{
    text-color: #FFF0A5;
    text-decoration: none;
    text-align: left;
}

#menubox { 
    position: absolute;
    left: 100px;
    top: 100px;
}

#menubox ul {

    display:inline-block;
    padding-left:0;
}

#menubox > ul {
    width: 100px;
}

#menubox > ul ul {
    position:absolute;
    display: none;
    width: 200px;

}
#menubox li {
    list-style-type:none;
    display:block;
}

#menubox li:hover {
    background:red;
}

#menubox a {
    display:inline-block;
    width:100%;
}

#menubox ul li:hover ul {
    display: inline-block;
    background: orange;
}

#menubox ul ul
{
    position: absolute;
    left: -9999px;
    padding: 100px;
    list-style: none;
}

#menubox ul li:hover ul
{
    left: 0;
    top: 0;
    z-index:100;
}