<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="hoversidebar.css">
<nav class="side-menu">
<ul>
<li><a href="">You Know<span><i class="fas fa-comment"></i></span></a></li>
<li><a href="">That<span><i class="fab fa-angellist"></i></span> </a></li>
<li><a href="">You are<span><i class="fas fa-grimace"></i></span> </a></li>
<li><a href="">Awsome<span><i class="fas fa-smile-wink"></i></span> </a></li>
<li><a href="">So follow<span><i class="fas fa-bookmark"></i></span> </a></li>
<li><a href="">Me<span><i class="fas fa-heart"></i></span> </a></li>
</ul>
</nav>
body{
/*background: black;*/
}
.side-menu{
width: 16em;
height: auto;
margin: 4em auto 0;
font-size: 1em;
line-height: 2em;
font-weight: 700;
color: white;
text-transform: uppercase;
/* text-decoration: none;
border: none;*/
position: absolute;
top: 0;
bottom: 0;
left: -13em;
}
ul{
list-style: none;
}
li{
display: block;
background: #333;
height: 2em;
padding: 1em 1.5em;
position: relative;
transition: transform .5s,background-color .5s ,color 0.5s;
}
li:nth-child(1){
background:#479AF1 ;
}
li:nth-child(2){
background:#F16847;
}
li:nth-child(3){
background:#F1EA47;
}
li:nth-child(4){
background:#4EF147;
}
li:nth-child(5){
background:#476EF1;
}
li:nth-child(6){
background:#F14780;
}
li:hover{
background:;
transform: translateX(10em);
}
a{
display: block;
color: white;
text-decoration: none;
}
span{
display: block;
position: absolute;
font-size: 1.222222222222222em;
line-height: 2em;
height: 2em;
top: 0;
bottom: 0;
margin: -5px 2px;
padding: 1em 1.5em;
right: -1em;
}