Zindex無法正常工作

我有一個網站，我一直在嘗試開發，並且網站的一部分是開發一個滑動菜單，當鼠標懸停時會水平滑動。我開始默認菜單被完全擴展，以便實時開發。Zindex無法正常工作

對於目視參考，我試圖達到這樣的事：

|--------------|_____________ 
|Menu 1  >|Menu 1 item 1| 
|Menu 2  .|Menu 1 item 2| 
|Menu 3  .|Menu 1 item 3| 
|______________|_____________|

我的代碼是這樣的：

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<style> 
@charset "utf-8"; 
/* CSS Document */ 

#sidebar { 
    position: fixed; 
    left: 0; 
    top: 0; 
    background: #151515; 
    width: 250px; 
    height: 100%; 
    z-index: 2; 
    overflow-x: hidden; 
    overflow-y: hidden; 
    display: block; 
    transition: 0.5s; 

} 

#sidebarInfo{ 
    margin: 0px,5px,10px,5px; 
    color: #7E7E7E; 
    width: 100%; 
    height: 50px; 
    position: relative; 
    font-family: allerta, sans-serif; 
    font-size: 9.5px; 
    top: 70%; 
    align-content: center; 
    display:flex; 
    justify-content:center; 
    align-items:center; 
} 

.sidebarLi{ 
    position: relative; 
    margin: 10px; 
    font-size: 28px; 
    color: aliceblue; 
    width: 100%; 
    font-family: allerta, sans-serif; 
} 

.slideMenu{ 
    position:relative; 
    transition:0.4s; 

} 
.menuItem{ 
    position:relative; 
    transition: 0.4s; 
    width: 150px; 
    height: 30px; 
    overflow-x: visible; 
    overflow-y: visible; 
    left: 180px; 
    z-index: 0; 
    color: #000000; 
    background: #FFFFFF; 
} 

</style> 

<title>Caduceus Technologies</title> 

</head> 

<body> 
    <div id="sidebar"> 
     <div class="sidebarLi"> 
      &nbsp;•&nbsp;Home 
     </div> 
     <div class="sidebarLi"> 
      <div class="slideMenu"> 
       &nbsp;•&nbsp;Projects 
       <div class="menuItem"> 
        menuItem1 
       </div> 
      </div> 
     </div> 
     <div class="sidebarLi"> 
      &nbsp;•&nbsp;Resume 
     </div> 
     <div class="sidebarLi"> 
      &nbsp;•&nbsp;Contact 
     </div> 
    </div> 
    <div style="background:#1D1D1D; position: relative; width:1000px; height: 1000px;"> 
     Lorem 
    </div> 
</body> 
</html>

不過，雖然我不能上傳圖片，解析該文件將告訴你menuItem只顯示一部分，即使Z值表示帶有文本「菜單項」的div將在最上面。究竟發生了什麼問題？

來源

2017-05-03 QuestionBansAreStupid