html - css疑似セレクターがdivで機能しない

Question

ページの横に固定メニューを作成しようとしています。ただし、部分的に非表示にして、ホバー時にのみ展開する必要があります。css と疑似セレクターでこれを実行しようとしましたが、うまくいきません。

HTML:

<div id="sideMenu">
    <ul>
        <li>Wide Screen</li> <!--turn sidebar on/off-->
        <li>Random Border</li> <!--randomize vidcontain border-->
        <li>Control Bar</li> 
    </ul>
</div>

CSS:

#sideMenu{
    position: fixed;
    left: -95px;
    top: 250px;
    height:100px;
    width:100px;
    background-color: #D4D048;
    z-index:-1;
    display:block;
}
#sideMenu:hover{
   left: 0px;
}

Answer 1

divのZ-indexは、divがホバーされていることを認識できないため、ホバーに関するルールは適用されませんでした。z-indexの位置を大きくすると、この問題は解決しました。