JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <body>
      <ul id="menu">
        <li class="sprite current">You Are Here</li>
        <li class="sprite"><a href="#A">Contact</li>
        <li class="sprite"><a href="#B">Projects</li>
      </ul>
    </body>
    </html>

CSS

#menu {
      left:10px;
      top:50px;
      height:300px;
      width: 147px;
      position:fixed;
    }
    .sprite {
      background: url('http://www.jp2code.net/logos/jp2Rollover.png') 0px 0px no-repeat;
      height:50px;
      padding-left: 50px;
      width:147px;
      z-index:1;
    }
    .sprite a {
      background-position: 0px 100px;
      color:Red;
      vertical-align: middle;
    }
    .sprite.current, .sprite.current:hover {
      background-position: 0px -100px;
    }
    .sprite:hover {
      background-position: 0px -50px;
    }
    .sprite:hover a {
      color:Yellow;
    }