尝试将鼠标悬停在其上时，页脚菜单会消失

Question

我有一个页脚菜单，但问题是每次我尝试将鼠标悬停在菜单上时，它都会消失......当我将鼠标悬停在链接上时，它显示正常，但当我尝试将鼠标悬停在菜单项上时，它就会消失。我该如何解决这个问题？我尝试使用填充，但没有用。

.footer-links {
display: inline-block;
font-size: 1.8rem;
padding: 0 0 0 10px;
cursor: pointer;
}
.wrapper {
position: fixed;
left: 0;
bottom: 0;
padding: 0;
}
.footer-links:hover+.drop-up {
display: block;
}
.drop-up {
top: auto;
bottom: 100% !important;
left: auto;
right: 0;
padding: 5px 0;
}
.drop-up::after {
border-top: 6px solid #FFFFFF;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
content: "";
display: inline-block;
left: 45%;
position: absolute;
bottom: -6px;
}
.drop-up li {
padding: 10px;
}

<div class="wrapper">
<div class="footer-links">+Links</div>
<ul class="dropdown-menu drop-up" role="menu">
<li><a href="#">Test</a></li>
</ul>
</div>

JSFiddle Demo

更新：

.wrapper:hover + .drop-up {
display: block;
}

Answer 1

参考您的具体示例，您仅在悬停.footer-links时display:block.drop-up：

.footer-links:hover+.drop-up {
display: block;
}

您可能还希望在悬停.drop-up时显示它：

.footer-links:hover+.drop-up,.drop-up:hover {
display: block;
}

请注意，这是一个非常糟糕的设计决策，如果/当它们之间的距离达到1px时，它将中断。这里的方法是在两者周围都有一个包装器，并在包装器的悬停状态时触发菜单打开(扩展到两者并允许它们之间的空间(。另一个流行的选项是添加一个类来打开菜单，并在离开打开器或菜单(javascript(的短暂超时后将其删除。 另一个相当脆弱的解决方案是使用转换延迟(纯CSS解决方案，但是，它不是我所说的固体代码(。

---

撇开所有这些不谈，您似乎正在尝试使用Bootstrap。
首先，不要使用Bootstrapv3.0.0！如果要使用 v3，请使用 v3 的最新可用版本 (v3.3.7(。它与v3.0.0相同，没有在启动后发现错误。

此外，即使它看起来很臃肿，也要坚持使用它们的标记 (html(。一切都是有原因的。删除其中一些，您的下拉列表将在某些设备或某些响应间隔上停止工作。

这是一个完全工作的示例：

$('footer .dropup').on('mouseenter', function() {
$(this).addClass('open')
}).on('mouseleave', function(e) {
var du = $(e.target).closest('.open');
setTimeout(function() {
if (du.is('.open') && !du.is(':hover')) {
du.removeClass('open')
}
}, 321)
})

body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
main {
flex-grow: 1;
}
footer {
min-height: 60px;
line-height: 60px;
background-color: #f5f5f5;
}
footer .dropup {
display: inline-block;
}

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<main role="main" class="container"></main>
<footer class="footer">
<div class="container">
<div class="dropup">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropup
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</div>
</footer>

您不需要自定义CSS(我为粘性页脚添加了它(。添加 jQuery 以使其在悬停时打开。如果你想要默认行为(在click打开，不要使用 js(：