Меню нижнего колонтитула исчезает при попытке наведения на него

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

Ссылаясь на ваш конкретный пример, вы только display:block ваш .drop-up, когда .footer-links находится при наведении:

.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, без ошибок, обнаруженных после его запуска.

Кроме того, придерживайтесь их разметки (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):