html - 带 z-index 的菜单(过渡)

Question

我的页眉中有一个菜单，但我遇到了问题。
所以这里是 JsFiddle ，以及我的一些代码:

HTML

<div id="menu">
  <div class="onglet">
    <a href="/"><div class="btn ">2</div></a>
    <div class="topbar-dialog hidden">
      <div class="modal-content">
        <ul>
            <li><a href="">XX<br/><span class="item-summary">xx</span></a></li>
             <li><a href="">xx<br/><span class="item-summary">xx xxxxx xxxxx</span></a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

CSS(只是一部分)

.topbar-dialog.hidden{margin-top:-450px;-webkit-transition:.5s;z-index:-1;}

那么问题来了。如您所见，菜单出现在文本下方...如果我设置 z-index:-2;到文本，菜单变得毫无用处......

也许有人可以帮助我......

编辑:
我忘了提到菜单也应该放在 <div id="menu"> 后面。

Answer 1

我不知道这是否是一个好的解决方案，但它确实有效。

首先，在你的 div <div id="menu">添加一个新的 div(空)<div class="layout"></div> .
并考虑更改父 div 的位置(到 relative)。这是 CSS:

#menu{background:#D5D5D5;text-shadow:1px 1px 0 #eee;position:relative;}
#menu .layout{position:absolute;height:100%;width:100%;z-index:99;background:#D5D5D5}

然后，只需添加一个 z-index:2到你的菜单。 这是结果:http://jsfiddle.net/8FZ4r/5/