Footer menu goes away when trying to hover on it - html

Question

I have a footer menu but the issue is that everytime i try to hover on the menu it goes away... it shows up fine when i hover over the link but goes away when I try to hover on the menu item. How can I fix this? I tried using padding but didn't work.
.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>Test</li>
</ul>
</div>
JSFiddle Demo
UPDATE:
.wrapper:hover + .drop-up {
display: block;
}

Answer 1

Referring to your specific example, you only display:block your .drop-up when .footer-links is hovered:
.footer-links:hover+.drop-up {
display: block;
}
You probably want to also display it when .drop-up is hovered:
.footer-links:hover+.drop-up,.drop-up:hover {
display: block;
}
Note this is a very poor design decision and it will break if/when there is as much as 1px distance between them. The way to go here is to have a wrapper around both and trigger the menu open on hover state of the wrapper (which extends to both and allows space between them). Another popular option is to add a class to open the menu and remove it after a short timeout from leaving the opener or the menu (javascript).
Another rather fragile solution is to use transform delays (pure CSS solution, however, it's not what i'd call solid code).
Leaving all that aside, it appears you're trying to use Bootstrap.
First of all, do not use Bootstrap v3.0.0! If you want to use v3, use the latest available version for v3 (v3.3.7). It's the same as v3.0.0, without the bugs discovered after it was launched.
Also, stick to their markup (html) even if it looks bloated. Everything is there for a reason. Remove some of it and your dropdown will stop working on some devices or on some responsiveness interval.
Here's a fully working example:
$('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>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div>
</div>
</footer>
You don't need the custom CSS (I added it for the sticky footer). The jQuery is added to make it open on hover. If you want the default behavior (open on click, don't use the js):