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位置解决了这个问题。