Как сделать появляющееся меню при наведении?
Можно никаких не совершать.
Все это можно сделать на чистом CSS.
Вот пример: https://jsfiddle.net/9g7hdob7/  и даже 20 пиксельный зазор есть.
Расположить меню выше следующих элементов можно с помощью z-index<div class="container">
    <div class="button">
        Button
    </div>
    <div class="menu_gap">
        <div class="menu">
            Menu
        </div>
    </div>
</div>.container {
    position: relative;
    width: 200px;
    height: 50px;
    background: #f00;
}
.button {
    display: block;
    color: #fff;
}
.menu_gap {
    position: absolute;
    top: 100%;
    left: -20px; 
    padding: 0 20px 20px 20px;
    display: none;
}
.container:hover .menu_gap {
    display: block;
}
.menu {
    background: #000;
    color: #fff;
    width: 400px;
    padding: 10px 0;
}
Самый простой вариант  https://jsfiddle.net/49hsy10L/