Toggling responsive menu - css

Question

I have the following code on a site (courtesy of codepen).
However, at 320px it covers the entire window whereas I need it to toggle down when triggered. At the moment it hides page content. It is possible with this code? thanks
#menuwrap {
width: 700px;
margin: -50px auto 0 auto;
float: right;
text-align: center;
height: 40px;
}
nav {
display: block;
position: relative;
z-index: 100;
min-height: 40px;
margin: 0 auto;
}
nav, nav a {
color: #fff;
text-decoration: none;
font-family: Verdana, sans-serif;
font-size: 90%;
}
nav a {
display: block;
padding: 10px;
}
nav a:hover {
background: gray;
}
nav li {
margin: 0 auto;
}
nav ul {
padding:0;
margin: 0;
}
nav ul li {
float:left;
display:inline;
position:relative;
width: 100px;
}
nav ul li ul {
left:0;
top:100%;
}
nav ul ul {
display:none;
}
nav li:hover > ul {
display:block;
position:absolute;
z-index:1000;
width: 150px;
}
nav ul ul li:hover > ul {
right: -150px;
top: 0;
left: auto;
}
/*Hide checkbox and label by default*/
nav > input,
nav > label {
display: none;
}
nav > label {
width: 100%;
float: left;
padding: 10px;
padding-right: 0;
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/*Media query*/
#media (max-width: 400px) {
nav > label, nav ul li ul {
display: block;
}
nav > ul {
display: none;
clear: both;
}
nav > input:checked + ul {
display: block;
}
nav ul ul li a:before {
/*content:'↪ ';*/
display: inline;
}
nav ul li {
display: block;
border-right: none;
padding-left: 10px;
float:right:
margin-top: -50px;
}
nav li:hover ul {
position: relative;
width: auto;
}
nav ul ul li:hover > ul {
right:auto;
top: auto;
left: auto;
}
}