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索引使div無法識別它已被懸停，因此不適用與懸停有關的規則。 增加z-index位置解決了此問題。