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

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。
首先，不要使用 Bootstrap v3.0.0！如果您想使用 v3，请使用 v3 的最新可用版本 (v3.3.7)。和v3.0.0一样，没有上线后发现的bug。

此外，即使看起来臃肿，也要坚持使用他们的标记 (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）：