title: Z-index not working on fixed header and fixed drop down menu
body: <p>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 <em>lower</em> 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:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;header&gt;
      &lt;div id="menu-button" class="up"&gt;menu&lt;/div&gt;
      &lt;nav role="primary" class="hide"&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;foobar&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;foobar&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;foobar&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;foobar&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;foobar&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;foobar&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/nav&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><code>* {
      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);
  }
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>$('#menu-button').click(function () {
      $(this).toggleClass('down');
      $('nav').toggleClass('reveal');
  });
  </code></pre>
  
  <p>Here's the jsfiddle I made for it: </p>
  
  <p><a href="http://jsfiddle.net/kyleshevlin/yaJyK/6/" rel="nofollow">http://jsfiddle.net/kyleshevlin/yaJyK/6/</a></p>