CSS伪选择器不适用于div

Question

Im trying to create a fixed menu on the side of my page. However, I want it partially hidden and to expand on hover only. I tried to do this with css and pseudo selectors but it won't work.

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

Z-index on the div prevented the div from recognizing it was being hovered and therefore the rules pertaining to hover were not applied. Increasing the z-index position solved this issue.