JSFiddle - React, Tailwind, and code Playground

by web designer

HTML

<ul id="menu">
<li><a href="#"class="c_active">Home</a></li>
<li><a href="#">Self Help</a></li>
</ul>

CSS

#menu {
  list-style-type: none;
  position: absolute;
  top:80px;
  width: 100%;
  margin:0;
  padding:0;
  margin-top:-10px;
  margin-left:28%;
  margin-right:65px;
}


#menu li a{
	padding: 20px 10px;
	text-decoration: none;
	display: inline-block;
	width: 60px;
	height: 50px;
	background: url(http://3.bp.blogspot.com/_167-sL7Cczk/TBiMz6jdtYI/AAAAAAAABcs/JxqC2vCIFa4/s1600/cute-puppy-dog-wallpapers.jpg);
	background-repeat: no-repeat;
	background-size: 600px 221px;
	white-space:nowrap;
    border:1px solid red;
}
#menu li{
    float:left;
    margin:5px;
    height:100px;
    width:100px;
}
#menu li a.active,
#menu li a:hover{
	background-position: 52.5% 44%;
}