Css 页脚'；s导航子菜单赢得'；除非我快速鼠标悬停在ul open子菜单的最左侧/右侧，否则我不能在鼠标移出后保持打开状态 我正在构建一个网站，它将是响应的，我需要一个固定的页脚导航，它在屏幕中央居中，在激活一个下拉菜单时悬停。我对每件事都只使用了百分比（从长远来看，这对我的头球在宽度上的排列很重要），这让我有点困惑

每当我将鼠标悬停在

INFO

（请参见my）上并试图将鼠标向上移动到子菜单时，只要我离开

INFO

，子菜单就会下降。当我从我的

#footer nav ul li:hover>ul

中删除css属性时：

位置

、

宽度

、

底部

（基本上将下拉菜单变成下拉菜单），即使我将鼠标移到子菜单上，子菜单仍保持打开状态。我甚至可以将

margin-bottom

更改为

20%

，子菜单在空白处仍然保持打开状态。当我把它做成一个下拉列表而不是一个下拉列表时，是什么让它接近呢

我还有一个问题，悬停是在哪里触发的。我可以将鼠标移动到

INFO

的左/右，我的子菜单仍然会弹出。如何使用当前的

div

，设置百分比和居中来解决此问题

以下是相关代码：

<div id="background">
  <footer id="footer">
    <div id="footer-nav">
      <ul>
        <li id="info">INFO
          <ul>
            <li id="twitter"><a href="https://twitter.com" 
                target="_blank">TWITTER</a></li>
            <li id="instagram"><a href="https://www.instagram.com" 
                target="_blank">INSTAGRAM</a></li>
            <li id="email"><a href="mailto:email@email.com">EMAIL</a></li> 
          </ul>
        </li>
      </ul>
    </div>
  </footer>
</div>

---

问题来自

页脚导航ul:hover>ul

上的

利润底部：2%

。当您离开

Info

按钮进入此页边距时，您不再将鼠标悬停在所讨论的元素上。要更正此问题，只需将其替换为填充底部：2%：

$（文档）.ready（函数（）{
$（“#email”）.hover（函数（）{
$（“#email”）.css（“背景色”、“黑色”）；
}，函数（）{
$（“#email”）.css（“背景色”、“白色”）；
});
});
$（文档）.ready（函数（）{
$（“#email”）.hover（函数（）{
$（“#email”）.css（“颜色”、“白色”）；
}，函数（）{
$（“#email”）.css（“颜色”、“黑色”）；
});
});
$（文档）.ready（函数（）{
$（“#twitter”）.hover（函数（）{
$（“#twitter”）.css（“背景色”、“黑色”）；
}，函数（）{
$（“#twitter”）.css（“背景色”、“白色”）；
});
});
$（文档）.ready（函数（）{
$（“#twitter”）.hover（函数（）{
$（“#twitter”）.css（“颜色”、“白色”）；
}，函数（）{
$（“#twitter”）.css（“颜色”、“黑色”）；
});
});
$（文档）.ready（函数（）{
$（“#instagram”）.hover（函数（）{
$（“#instagram”）.css（“背景色”、“黑色”）；
}，函数（）{
$（“#instagram”）.css（“背景色”、“白色”）；
});
});
$（文档）.ready（函数（）{
$（“#instagram”）.hover（函数（）{
$（“#instagram”）.css（“颜色”、“白色”）；
}，函数（）{
$（“#instagram”）.css（“颜色”、“黑色”）；
});
});
#背景{
背景色：#FFFFFF；
边际：0px；
填充：0px；
排名：0；
左：0；
宽度：100%；
身高：100%；
位置：固定；
z指数：-1；
}
#页脚{
位置：固定；
底部：0；
宽度：25%；
文本对齐：居中；
利润底部：1%；
左边缘：-15%；
左：50%；
左边缘：-12.5%；
}
a{
文字装饰：无；
颜色：继承；
}
#页脚导航ul li：悬停>ul{
显示：块；
位置：绝对位置；
宽度：100%；
底部：100%；
垫底：2%；
}
#页脚导航{
宽度：100%；
}
#页脚导航{
字体系列：Arial；
字体大小：100%；
字体大小：粗体；
颜色：#000000；
列表样式类型：无；
文本对齐：居中；
保证金：自动；
填充顶部：0px；
右边填充：0px；
垫底：0px；
左侧填充：0px；
}
#页脚导航{
字体系列：Arial；
字体大小：100%；
颜色：#000000；
列表样式类型：无；
字体大小：正常；
显示：无；
}
#电子邮件{
垫面：2%；
垫底：2%；
边框：1px纯黑；
颜色：#000000；
}
#instagram{
垫面：2%；
垫底：2%；
边框：1px纯黑；
颜色：#000000；
}
#推特{
垫面：2%；
垫底：2%；
边框：1px纯黑；
颜色：#000000；
}


info







Awesome；很乐意帮忙！一旦你确认这解决了你的问题，请不要忘记点击投票按钮下方的灰色复选框——这会将其从“未回答问题”队列中删除，并为提问者和回答问题者赢得声誉。你可以在提出任何问题15分钟后这样做。当然，如果你这么说，你没有义务将我的答案（或其他人的答案）标记为正确，尽管将问题标记为已解决有助于保持事情顺利进行：）我肯定会这样做！再次感谢你，伙计！：）您是否碰巧在触发子菜单的位置发现了我的错误？当我在“信息”的最左边/最右边徘徊时，它似乎会弹出。。。当我将鼠标悬停在整个div上时，它似乎会被触发，而不仅仅是文本。：）我在那里发现了问题，现在将更新我的答案以提供解决方案；）我已经更新了我的答案来纠正这一点，并解释了为什么会发生这种情况：）我接受了答案。先生，你绝对是个救命恩人。给这个人加薪。我真的非常感谢你。非常感谢。干杯
#background {
    background-color: #FFFFFF;
    margin: 0px;
    padding: 0px;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: -1;
}

#footer {
    position: fixed;
    bottom: 0;
    width: 25%;
    text-align: center;
    margin-bottom: 1%;
    margin-left: -15%;
    left: 50%;
    margin-left: -12.5%;
}

a {
    text-decoration: none;
    color: inherit;
}

#footer-nav ul li:hover > ul {
    display: block;
    position: absolute;
    width: 100%;
    bottom: 100%;
    margin-bottom: 2%;
}

#footer-nav {
    width: 100%;
}

#footer-nav ul {
    font-family: Arial;
    font-size: 100%;
    font-weight: bold;
    color: #000000;
    list-style-type: none;
    text-align: center;
    margin: auto;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
}

#footer-nav ul ul {
    font-family: Arial;
    font-size: 100%;
    color: #000000;
    list-style-type: none;
    font-weight: normal;
    display: none;
}

#email {
    padding-top: 2%;
    padding-bottom: 2%;
    border: 1px solid black;
    color: #000000;
}

#instagram {
    padding-top: 2%;
    padding-bottom: 2%;
    border: 1px solid black;
    color: #000000;
}

#twitter {
    padding-top: 2%;
    padding-bottom: 2%;
    border: 1px solid black;
    color: #000000;
}