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