JSFiddle - React, Tailwind, and code Playground

HTML

<div id='side'>
    <div class='link' id='link1'>
        email
        <div class='link' id='link2'>
            facebook
            <div class='link' id='link3'>
                twitter
                <div class='link' id='link4'>
                    book
                    <div id='image'></div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

#side{
    position:relitive;
    height:341px;
    width:250px;
}

#link1{
    top:0;
}

.link{
    position:absolute;
    left:0;
    top:85px;
    height:85px;
    padding-left:160px;
    width:90px;
}

#image{
    position:absolute;
    top:-255px;
    left:0;
    z-index:-1;
    background:url(http://i.stack.imgur.com/I2Y4k.png) -720px 0;
    height:341px;
    width:150px;
}

#link1:hover #image{
    background-position:-540px 0;
}

#link2:hover #image{
    background-position:-360px 0;
}

#link3:hover #image{
    background-position:-180px 0;
}

#link4:hover #image{
    background-position:-0px 0;
}