JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content">
    <ul>
        <li>Раз</li>
        <li>Два</li>
        <li>Три</li>
        <li>Раз</li>
        <li>Два</li>
        <li>Три</li>
        <li>Раз</li>
        <li>Два</li>
        <li>Три</li>
    </ul>
</div>
<footer>
        <div id="container">
            <div id="dummy"></div>
            <div id="box">
                <p id="hint">Наведи мышку сюда</p>
                <p id="menu">
                    <a href="#">Межрассовое</a>
                    <a href="#">Мокрые киски</a>
                    <a href="#">Конь ебет мужика</a>
                    <a href="#">Инцест с собакой</a>
                </p>
            </div>
        </div>
</footer>

CSS

* {margin: 0; padding: 0;}
li {margin-left: 50px;}
html, body {
    height: 100%;
}
#content {
    min-height: 100%;
    margin-bottom: -50px;
}
li {
    color: indianred;
    text-decoration: underline;
}
footer {
    height: 50px;
    background-color: #9d9;
}
#container {
    overflow: hidden;
    height: 100%;
}
#dummy {
    height: 32px;
}
#box {
    text-align: center;
}
#menu {
    background-color: #fff;
    border: 1px solid #000;
}
#menu a {padding-left: 10px;}

JavaScript

$('#container').on('mouseenter', function(){
    $('#dummy').slideToggle();
});
$('#container').on('mouseleave', function(){
    $('#dummy').slideToggle();
});