帶有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

您有一個z-index：CSS轉換后為-1。 比較容易發現是否“整理”了jsfiddle中的代碼。 刪除它似乎可以完成您想要的。 更新的小提琴： http : //jsfiddle.net/8FZ4r/3/

相關摘要，已編輯：

.topbar-dialog.hidden {
    font-family:'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-size:12px;
    background-color:#fff;
    box-shadow:0 2px 2px rgba(0, 0, 0, 0.2);
    z-index:999;
    position:absolute;
    text-align:left;
    border-left:1px solid #e0e0e0;
    border-right:1px solid #e0e0e0;
    border-bottom:1px solid #e0e0e0;
    margin-top:-450px;
    -webkit-transition:.5s;
}

Answer 2

您需要將z-index更改為正值。

Answer 3

我不知道這是否是一個好的解決方案，但是它可以工作。

首先，在您的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/