尝试创建一个具有z-index的堆叠菜单'使用HTML5/CSS3/JS

我已经到处寻找解决方案，但找不到任何具体的解决方案，我知道这是非常可行的，但我认为我缺乏JavaScript经验，这限制了我在这里的工作。本质上，我有5个div，每个div都像一个按钮。我希望每个按钮都能使另一个与5个按钮无关的div出现。我把它们称为"Menubox1/2/3/4"，每一个都链接到每一个。我的第一个想法是将所有菜单叠放在一起，顶部有一个空白菜单，z索引为5。

然后，通过在div按钮上使用"onclick"方法，我会告诉它获取其相应菜单的元素，并将其z索引增加到6，以位于堆的顶部。我也会告诉它让所有其他菜单都转到4，转到其他菜单下面。

因此，有效地，每个按钮都会使与其关联的菜单以最高的z索引出现在顶部，并隐藏其他菜单框，这样就不会有其他框在同一级别上。

我找到了一种方法，使它与这个JS 一起工作

//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";
        }

<div onclick="showstuff('Menu1'); hidestuff('Menu2'); hidestuff('Menu3');" ;style="cursor:pointer;">

通过将相应的boxid放在"onclick"中，它可以全部工作，但问题是它只工作一次，我需要它在每次单击时都工作。

如果有人需要更多信息，我会提供。