JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="navigation">
    <li><a href="#">test</a></li>
</ul>

CSS

.navigation li {
    height: 80px;
    position: relative;
    width: 92px;
}
.navigation li a {
    background: transparent url('https://dl.dropbox.com/u/7737304/menu-sprite1.png') center top no-repeat;
    display: block;
    height: 49px;
}
.navigation li::after {
    background: transparent url('https://dl.dropbox.com/u/7737304/menu-sprite1.png') center -49px no-repeat;
    bottom: 0px;
    content: '';
    display: block;
    height: 31px;
    position: absolute;
    width: 100%;
}
.navigation li:hover::after {
    background: transparent url('https://dl.dropbox.com/u/7737304/menu-sprite1.png') center -130px no-repeat;
}