title: Trying to create a stacked menu with z-index' with HTML5/CSS3/JS
body: <p>I have looked all over for a solution but can't find anything specific and I know it is very doable but I think my lack of experience with JavaScript is limiting me here. 
  Essentially I have 5 divs, each one acts like a button. I want each button to make another div unrelated to the 5 buttons to appear. I called them "Menubox1/2/3/4" and each one is linked to each one. My first idea was to have all the menus stacked on top of each other with a blank one on top with a z-index of 5. </p>
  
  <p>And then by using the "onclick" method on the div button, I would tell it to get the element of its respective menu and increase its z-index to 6, to go on top of the pile. I would also tell it to make all the other menus go to 4, to go below the rest. </p>
  
  <p>So effectively each button would make the menu associated with it appear on top with the highest z-index and also hide the other menu boxes so that no other box is on the same level. </p>
  
  <p>I have found a way to make it work with this JS</p>
  
  <pre><code>//Shows the current menu on top
    function showstuff(boxid) {
              document.getElementById(boxid).style.zIndex="5";
          }
  //Hides the rest of them.
          function hidestuff(boxid) {
              document.getElementById(boxid).style.zindex="3";
          }
  
  
  
  &lt;div onclick="showstuff('Menu1'); hidestuff('Menu2'); hidestuff('Menu3');" ;style="cursor:pointer;"&gt;
  </code></pre>
  
  <p>And by putting the respective boxid in the "onclick" , it all works but the problem is it only works once, and I need it to work every time each one is clicked. </p>
  
  <p>If anyone needs more information I an provide.</p>