That was your design not mine.
You placed the nav at 50% using position:fixed and fixed positioned elements cannot be accessed if they go outside the viewport. Your original demo only had a couple of items so likely would not have been an issue. If you are going to have loads of items then you will need to re-think the usefulness of having the menu fixed half way down the screen.
The example you linked to was a single line menu of 5 items only all of fixed height which is fine and easy to control and doesn’t extend out of the viewport. If you want a fixed side menu then you should follow that sort of design and keep it minimal.
If you want a full drop down then you should have it in the flow at the top of the page like normal navigation or if it must be fixed positioned then move it to nearer the top of the page so that there’s a good chance it won’t go out of the viewport.
In the end its up to you to decide what is the best design for the content you have in mind. We started with a couple of items but if you are expanding to many items then a different approach is needed. Web design is all about what comes next and building the demo with full example content so that the right approach is taken from the start.
This is about as many items as you should be thinking of at that position.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled Document</title>
<style>
html, body {
height: 100%;
padding: 0;
margin: 0;
}
ul {
padding:0;
margin: 0;
list-style: none;
}
#navwrap {
position:fixed;
top: 0;
bottom:0;
right: 0;
width: 120px;
height:120px;
margin:auto;
}
#nav ul {
width: 100px;
background: grey;
position:absolute;
left:-9999em;
}
#nav a {
display:block;
padding:5px;
border:1px solid #000;
margin:0 0 -1px;
}
#navwrap ul li {
position:relative;
}
#nav li:hover > ul {
left:-100px;
top:0;
}
#nav li:hover > a {
background:yellow;
cursor:pointer
}
.button a {
display: block;
padding:5px 10px;
background: tomato;
}
.close {
z-index:-1;
opacity:0;
transition:all .5s ease .5s;
position:absolute;
left:0;
top:0;
}
#nav:hover + .close {
top:-30px;
opacity:1;
display: block;
padding:5px 10px;
background: tomato;
transition:all .5s ease 5s;
}
</style>
</head>
<body>
<div id="navwrap">
<ul id='nav'>
<li class="button"><a href="#">Sub menu here.</a>
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Submenu</a>
<ul>
<li><a href='http://www.google.com'>Google</a></li>
<li><a href='#'>Link 2</a></li>
<li><a href='#'>Link 3</a></li>
<li><a href='#'>Link 4</a></li>
</ul>
</li>
</ul>
</li>
<li class="button" ><a href="#">Sub menu 2</a>
<ul>
<li><a href="#">Link 2</a></li>
<li><a href="#">Submenu 2</a>
<ul>
<li><a href='http://www.google.com'>Google</a></li>
<li><a href='#'>Link 2</a></li>
<li><a href='#'>Link 3</a></li>
<li><a href='#'>Link 4</a></li>
</ul>
</li>
</ul>
</li>
<li class="button" ><a href="#">Sub menu 3</a>
<ul>
<li><a href="#">Link 3</a></li>
<li><a href="#">Submenu 3</a>
<ul>
<li><a href='http://www.google.com'>Google</a></li>
<li><a href='#'>Link 2</a></li>
<li><a href='#'>Link 3</a></li>
<li><a href='#'>Link 4</a></li>
</ul>
</li>
</ul>
</li>
<li class="button" ><a href="#">Sub menu 4</a>
<ul>
<li><a href="#">Link 4</a></li>
<li><a href="#">Submenu 4</a>
<ul>
<li><a href='http://www.google.com'>Google</a></li>
<li><a href='#'>Link 2</a></li>
<li><a href='#'>Link 3</a></li>
<li><a href='#'>Link 4</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<a class="close" href="#">Close</a> </div>
</body>
</html>