Проблемы с лишним местом после создания меню

Вообщем, сделал меню для сайта, обычное выдвигающееся меню (сверху на кнопку нажать и появится), но вот незадача: между контентом сайта и самом меню появилось ненужное расстояние, как я пытался решить проблему:

1. Просто перетащил контент сайта выше, результат: ненужное место появилось снизу.

2. Пробовал "поиграться" с visibility, результат: никакого.

Как работает меню:

Открытие: пользователь нажимает на кнопку, проигрывается анимация, меняется class элементов (js).

Закрытие: пользователь нажимает на кнопку, проигрывается анимация, меняется class элементов (js) (для некоторых из них для нового значения class visibility: hidden).

Собственно, код:

Html:

<ul id="ul" class="start">
                <li class="li"><button id="profile">Профиль</button></li>
                <li class="li"><button id="news">Что нового?</button></li>
                <li class="li"><button id="index">Главная страница</button></li>
                <li class="li"><button id="vlog">Мой Блог</button></li>
                <li class="li"><button id="upload">Загрузить видео</button></li>
                <li class="li"><button id="subs">Мои подписки</button></li>
            </ul>
            <button id="b-menu" class="start"></button>
            <div id="bg" class="start"></div>

Css:

.b-menu{
padding: 25px 25px;
outline: none;
border: 0;
background: url("../textures/menu.png") center / contain no-repeat;
}
#profile, #news, #index, #vlog, #upload, #subs{
padding: 10px 25px;
color: #bbb;
text-shadow: 1px 1px 1px black;
background: rgba(0, 0, 0, 0.16);
border: 0;
border-radius: 5px;
box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.06);
font-size: 15px;
outline: none;
width:100%;
background: #454545;
z-index: 99;
}
#profile{
position: relative;
}
#news{
position: relative;
top: 10px;
}
#index{
position: relative;
top: 20px;
}
#vlog{
position: relative;
top: 30px;
}
#upload{
position: relative;
top: 40px;
}
#subs{
position: relative;
top: 50px;
}
.li{
list-style: none;
}
#ul{
padding: 0px;
margin: 0px;
}
@keyframes hover{
0% {background-color: none}
100% {background-color: orange}
 }
 #profile:hover, #news:hover, #index:hover, #vlog:hover, #upload:hover, #subs:hover{
animation: hover 0.3s;
 }
 @keyframes menu{
0%{
position: relative;
left: 150px;
z-index: 100;}
10%{
position: relative;
bottom: 24px;
left: 150px;
transform: rotate(36deg);
z-index: 100;}
20%{
position: relative;
bottom: 48px;
left: 150px;
transform: rotate(72deg);
z-index: 100;}
30%{
position: relative;
bottom: 72px;
left: 150px;
transform: rotate(108deg);
z-index: 100;}
40%{
position: relative;
bottom: 96px;
left: 150px;
transform: rotate(144deg);
z-index: 100;}
50%{
position: relative;
bottom: 120px;
left: 150px;
transform: rotate(180deg);
z-index: 100;}
60%{
position: relative;
bottom: 144px;
left: 150px;
transform: rotate(216deg);
z-index: 100;}
70%{
position: relative;
bottom: 168px;
left: 150px;
transform: rotate(252deg);
z-index: 100;}
80%{
position: relative;
bottom: 192px;
left: 150px;
transform: rotate(288deg);
z-index: 100;}
90%{
position: relative;
bottom: 216px;
left: 150px;
transform: rotate(325deg);
z-index: 100;}
100%{
position: relative;
bottom: 240px;
left: 150px;
transform: rotate(360deg);
z-index: 100;}
}
#b-menu.tactive{
animation: menu 0.5s;
}
#b-menu.factive{
animation: menu 0.5s;
animation-direction: reverse;
}
#b-menu.end{
position: relative;
bottom: 240px;
left: 150px;
z-index: 100;
}
#b-menu.start{
position: relative;
top: 40px;
left: 150px;
z-index: 100;
}
#bg{
display: inline;
padding-bottom: 10px;
padding-top: 7px;
padding-right: 30px;
padding-left: 20px;
background-color: #454545;
border-radius: 3px;
z-index: 99;
}
@keyframes ul{
0%{
position: relative;
bottom: 0px;
}
10%{
position: relative;
bottom: 24px;}
20%{
position: relative;
bottom: 48px;}
30%{
position: relative;
bottom: 72px;}
40%{
position: relative;
bottom: 96px;}
50%{
position: relative;
bottom: 120px;}
60%{
position: relative;
bottom: 144px;}
70%{
position: relative;
bottom: 168px;}
80%{
position: relative;
bottom: 192px;}
90%{
position: relative;
bottom: 216px;}
100%{
position: relative;
bottom: 240px;}
}
#ul.end{
position: relative;
bottom: 240px;
visibility: hidden;
background: #373737 url("../textures/bg.png") 0 0 repeat;
}
#ul.tactive{
animation: ul 0.5s;
}
#ul.factive{
animation: ul 0.5s;
animation-direction: reverse;
}
#bg.start{
position: relative;
top: 45px;
left: 96px;
}
#bg.end{
position: relative;
bottom: 240px;
left: 96px;
 }
 #bg.tactive{
animation: ul 0.5s;
left: 96px;
 }
 #bg.factive{
animation: ul 0.5s;
animation-direction: reverse;
left: 96px;
 }

Js:

var menu = document.querySelector("#b-menu");
        var ul = document.querySelector("#ul");
        var bg = document.querySelector("#bg");
        var li = document.querySelector(".li");
        var profile = document.querySelector("#profile");
        var news = document.querySelector("#news");
        var index = document.querySelector("#index");
        var vlog = document.querySelector("#vlog");
        var upload = document.querySelector("#upload");
        var subs = document.querySelector("#subs");
menu.onclick = function() {
            if(menu.class == "start"){
                menu.class = "tactive";
                setTimeout(function() {
                    menu.class = "end";
                }, 499);
            }else if(menu.class == "end"){
                menu.class = "factive";
                setTimeout(function() {
                    menu.class = "start";
                }, 499);
            }
            if(ul.class == "start"){
                ul.class = "tactive";
                setTimeout(function() {
                    ul.class = "end";
                }, 499);
            }else if(ul.class == "end"){
                ul.class = "factive";
                setTimeout(function() {
                    ul.class = "start";
                }, 499);
            }
            if(bg.class == "start"){
                bg.class = "tactive";
                setTimeout(function() {
                    bg.class = "end";
                }, 499);
            }else if(bg.class == "end"){
                bg.class = "factive";
                setTimeout(function() {
                    bg.class = "start";
                }, 499);
            }
        }