Z-index not working on fixed header and fixed drop down menu

Z-index not working on fixed header and fixed drop down menu

I am trying to design a fixed drop down menu that slides and then sits
under a fixed header for my website when it's being viewed by smaller view
ports. I must not be understanding something correctly because despite
setting position properly and using a z-index lower than its parent on the
nav, it still does not work correctly. On drop down it slides under the
menu button I have created, but over the header and then stays above the
header. Here is my code:
HTML:
<header>
<div id="menu-button" class="up">menu</div>
<nav role="primary" class="hide">
<ul>
<li><a href="#">foobar</a></li>
<li><a href="#">foobar</a></li>
<li><a href="#">foobar</a></li>
<li><a href="#">foobar</a></li>
<li><a href="#">foobar</a></li>
<li><a href="#">foobar</a></li>
</ul>
</nav>
</header>
CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
header {
display: block;
float: left;
width: 100%;
height: 50px;
background-color: hsla(0, 0%, 20%, 1);
box-shadow: 0px 2px 8px #222;
position: fixed;
top: 0;
z-index: 99;
}
#menu-button {
display: block;
float: left;
background-color: hsla(0, 0%, 50%, 1);
color: #fff;
border: 2px solid #222;
border-radius: 6px;
padding: .25em .5em;
margin-left: 10px;
margin-top: 10px;
cursor: pointer;
}
.up {
background-image: linear-gradient(hsla(0, 0%, 100%, .2), hsla(0, 0%,
0%, .2));
}
.down {
background-image: linear-gradient(hsla(0, 0%, 0%, .2), hsla(0, 0%,
100%, .2));
}
nav ul {
list-style:none;
width: 100%;
position: fixed;
z-index: -1;
transition: all .6s ease;
-webkit-transition: all .6s ease;
-moz-transition: all .6s ease;
-o-transition: all .6s ease;
}
.hide ul {
top: -500px;
}
.reveal ul {
top: 50px;
}
nav ul li a, nav ul li a:visited {
display: block;
float: left;
width: 50%;
background-color: hsla(0, 0%, 35%, 1);
text-decoration: none;
text-align: center;
color: #fff;
padding: 1em;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
transition: .4s all;
-webkit-transition: .4s all;
-moz-transition: .4s all;
-o-transition: .4s all;
}
nav ul li:nth-child(even) a {
border-right: none;
}
nav ul li:hover a {
background-color: hsla(0, 0%, 50%, 1);
}
jQuery:
$('#menu-button').click(function () {
$(this).toggleClass('down');
$('nav').toggleClass('reveal');
});
Here's the jsfiddle I made for it:
http://jsfiddle.net/kyleshevlin/yaJyK/6/