Creating a Drop-Up Menu - html

Question

Currently the bottom-right menu on my website moves up when you click a menu item: http://www.jameswinfield.co.uk/v2.html
How do I get the menu itself to stay where it is and the menu items to display upwards?
My CSS is below:
.menu4 {
position: fixed;
z-index: 9999;
margin-top: 0px;
}
.menu4 nav {
-webkit-opacity: 0;
-moz-opacity: 0;
-ms-opacity: 0;
-o-opacity: 0;
opacity: 0;
}
.menu4 input#slide4:checked ~ nav {
-webkit-opacity: 1;
-moz-opacity: 1;
-ms-opacity: 1;
-o-opacity: 1;
opacity: 1;
}
.menu4 label {
position: fixed;
font-size: 50px;
cursor: pointer;
z-index: 9999;
}
.menu4 input#slide4 {
display: none;
}
.menu4 input#slide4:checked ~ label.open i {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.menu4 label i,
.menu4 nav,
.menu4 nav ul li a span {
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.menu4 label,
.menu4 nav ul li a i,
.menu4 nav ul li a span {
line-height: 120px;
text-align: center;
width: 120px;
height: 120px;
}
.menu4 nav ul {
list-style: none;
overflow: hidden;
}
.menu4 nav ul li a i {
font-size: 30px;
}
.menu4 nav ul li a span {
font-family: 'Lato', tahoma, sans-serif;
font-size: 17.14285714px;
text-transform: uppercase;
width: 0;
}
.menu4 nav ul li a:hover span {
width: 100px;
padding: 0 10px;
}
.menu4 nav ul li.active a span {
width: 100px;
padding: 0 10px;
}
.menu4.top {
bottom: 0px;
}
.menu4.bottom {
bottom: 0px;
}
.menu4.left,
.menu4.left label {
right: 0;
}
.menu4.right,
.menu4.right label {
right: 0;
}
.menu4.horizontal nav ul li,
.menu4.horizontal nav ul li a span {
float: left;
}
.menu4.left.horizontal nav {
margin-right: -50px;
}
.menu4.left.horizontal input#slide4:checked ~ nav {
margin-right: 120px;
}
.menu4.right.horizontal nav {
margin-right: -60px;
}
.menu4.right.horizontal input#slide4:checked ~ nav {
margin-right: 60px;
}
.menu4.blue label,
.menu4.blue nav ul li a ul li i {
color: #F82D27;
}
.menu4.blue nav ul li a span {
color: #F235E9;
}
.mixcloud {
display: none;
opacity: 0.7;
margin-left: 10px;
}
.youtube {
display: none;
opacity: 0.7;
}

Answer 1

The menu slides upwards from outside of the viewport, so position: fixed is a good choice here.
The menu container is also given position: fixed and it will remain fixed in place, relevant to the viewport.
Example
This is using :hover to simplify things, but can easily be adapted.
nav {
position: fixed;
bottom: 0;
left: 20px;
padding: 30px;
z-index: 2;
}
nav > a {
background: #F90;
padding: 20px;
color: #000;
}
.slideUp {
bottom: -400px;
left: 20px;
height: 400px;
width: 500px;
background: #F00;
position: fixed;
transition: bottom .3s linear;
z-index: 1;
}
nav:hover + .slideUp,
.slideUp:hover {
bottom: 80px;
}
<nav>
I am a menu item, hover me please
</nav>
<div class="slideUp"></div>