JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento</title>
</head>

<body>
   <div id="algo">
      <ul class="menu">
         <li class="item1"><a href="" title="Incio">Menu 1</a></li>
         <li class="item2"><a href="" title="Blog">Menu 1</a></li>
         <li class="item3"><a href="" title="Contacto">Menu 1</a></li>
      </ul>
   </div>
</body>
</html>

CSS

.menu {list-style:none; padding:0px; margin:0px;}
   .menu>li {
      float:left;
      margin:0px 5px 0px 0px;
      background:url("http://i47.tinypic.com/2u4hphy.png") no-repeat;
      /* Debemos saber cuanto mide cada "item" */
      /* Si no son iguales unos a otros, hay que indicarlo en sus respectivas clases. */
      width:86px;
      height:38px;
   }

   .menu>li a {
      /* Debemos ocultar el texto del link */
      /* Ademas haremos que el <a> ocupe el 100% del item. */
      text-indent:-99999px;
      width:100%;
      height:38px;
      color:transparent;
      display:block;
   }

   /* Declaramos por donde empieza la posicion en la imagen */
   /* width / height */
   .item1 {background-position:-0px -0px !important;}
   .item2 {background-position:-89px -0px !important;}
   .item3 {background-position:-179px -0px !important;}
   /* El hover */
   .item1:hover {background-position:-0px -46px !important;}
   .item2:hover {background-position:-89px -46px !important;}
   .item3:hover {background-position:-179px -46px !important;}