body{
    font-size: 1em;
    background: url(https://images.unsplash.com/photo-1511297968426-a869b61af3da?ixlib=rb-0.3.5&s=3193fd953f4249aa5b54dd98b246daba&auto=format&fit=crop&w=1050&q=80);
    background-size:cover;
    background-repeat: no-repeat;
    font-family: tahoma
}
.side-menu{
    width: 14em;
    height: auto;
    margin: 4em auto 0;
    font-weight: 1em;
    line-height: 2em;
    color: white;
    font-weight: 700;
    text-transform: uppercase;
    position: absolute;
    top: 0;
    bottom: 0;
    left: -10em;
}
.side-menu ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
.side-menu ul li{
    display: block;
    background-color: #333;
    height: 2em;
    padding: 1em 1.5em;
    position: relative;
    transition: transform .5s,background-color .5s, color .5s;
}
.side-menu ul li:nth-child(1){
    background-color: #00aced;
}
.side-menu ul li:nth-child(2){
    background-color: #3b5998;
}
.side-menu ul li:nth-child(3){
    background-color: #00a300;
}
.side-menu ul li:nth-child(4){
    background-color: #cb2027;
}
.side-menu ul li:nth-child(5){
    background-color: #1e7145;
}
.side-menu ul li:nth-child(6){
    background-color: #ffc40d;
}
.side-menu ul li:hover{
    background:-color:#339966;
    transform: translateX(10em);
}
.side-menu ul li a{
    display: block;
    color: #fff;
    text-decoration: none;
}
.side-menu ul li span{
    display: block;
    position: absolute;
    font-size: 1em;
    line-height: 2em;
    height: 2em;
    top: 0;
    bottom: 0;
    margin: 0 auto;
    padding: 1em 1.5em;
    right: 0.1666667em;
    color: #f8f6ff;
}