Off-Canvas CSS Menu

This is a fully working CSS off canvas slide out navigaion sytem, When you hover over class(button) it will transition the class(nav) to transform: traslateX back to 0% instead of -100%.

by Juan Muñoz

HTML

<div class="button">Nav</div>
<div class="nav">
    <ul>
        <li>Home</li>
        <div class="line"></div>
        <li>About</li>
        <div class="line"></div>
        <li>Work</li>
        <div class="line"></div>
        <li>Twitter</li>
        <div class="line"></div>
        <li>Reddit</li>
        <div class="line"></div>
        <li>Contact</li>
        <div class="line"></div>
        <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=LRVRBMBVRCTK8">
            <li>By me a drink</li></a>
    </ul>
</div>
<p>This is a fully working CSS off canvas slide out navigaion sytem, When you hover over class(button) it will transition the class(nav) to transform: traslateX back to 0% instead of -100%<br><br>By Louis Dickinson</p>

CSS

body{
    margin:0;
    background:firebrick;
    font-family:'Helvetica',San-Serif,Arial;
}
a{
    text-decoration:none;
}
span{
    float:left;
    width:50px;
    height:50px;
    background:#fff;
}
p{
    position:absolute;
    margin:auto;
    left:20px;
    right:20px;
    color:#fff;
    max-width:456px;
}
.button{
    margin:20px;
    padding:5px 15px;
    border-radius:5px;
    background:#111;
    color:#fff;    
}
.nav{
    position:fixed;
    margin:auto;
    top:0;
    left:0;
    bottom:0;
    padding-left:100px;
    width:250px;
    max-width:100%;
    background:#111;
    -webkit-transform:translateX(-101%);
    z-index:50;
    transition:0.4s;
}
.nav:hover,
.button:hover+.nav{
    -webkit-transform:translateX(0%);
}
ul{
    padding:20px 0 0;
    margin:0;
    height:100%;
    width:100%;
    background:#0f0f0f;
    border-left:1px solid rgba(255,255,255,0.2);
}
li{
    list-style:none;
    color:#fff;
    line-height:40px;
    padding-left:20px;
    font-size:20px;
    cursor:pointer;
}
hr{
    margin:10px 20px 10px 0;
    background:rgba(255,255,255,0.2);
    outline:0;
    border:0;
    height:1px;
}
.line{
    margin:0;
    background:rgba(255,255,255,0.2);
    outline:0;
    border:0;
    height:1px;
    width:0;
    transition:0.3s;
}
li:hover + .line{
    width:95%;
}
li:last-of-type:hover{
    color:red;
}