Можно никаких не совершать.
Все это можно сделать на чистом 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;
}
