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