JSFiddle - React, Tailwind, and code Playground

by jcubed111

HTML

<ul id="nav">
   <li id="n1"><a href="./"><span>Home</span></a></li>
   <li id="n2"><a href="./?c=about"><span>About</span></a></li>
   <li id="n3"><a href="./?c=programmes"><span>Programmes</span></a></li>
   <li id="n4"><a href="./?c=grants"><span>Grants</span></a></li>
   <li id="n5"><a href="./?c=publications"><span>Publications</span></a></li>
  </ul>

CSS

#nav {
	position: relative;
	float: right;
	_background: url('http://i59.tinypic.com/25tapoi.jpg');
	width: 498px;
	height: 23px;
	margin: 110px 2px 0 0;
	border: 0;
	padding: 0;
}

#nav li {
	position: absolute;
	top: 0;
	margin: 0;
	border: 0;
	padding: 0;
	list-style: none;
}

#nav li, #nav a {
	height: 23px;
	display: block;
}

#nav span {
	display: none;
}

#n1 {
	left: 0;
	width: 73px;
}
#n2 {
	left: 71px;
	width: 94px;
}

#n3 {
	left: 167px;
	width: 124px;
}

#n4 {
	left: 292px;
	width: 82px;
}

#n5 {
	left: 375px;
	width: 125px;
}



#n1 a{
    width:77px;
    background: transparent url(http://i60.tinypic.com/sq3xjn.png) 0 0 no-repeat;
}

#n1 a:hover{
    background-position:0 -23px;
}

#n2 a{
    width:102px;
    background: transparent url(http://i60.tinypic.com/sq3xjn.png) -77px 0 no-repeat;
}

#n2 a:hover{
    background-position:-77px -23px;
}

#n3 a{
    width:131px;
    background: transparent url(http://i60.tinypic.com/sq3xjn.png) -179px 0 no-repeat;
}

#n3 a:hover{
    background-position:-179px -23px;
}

#n4 a{
    width:89px;
    background: transparent url(http://i60.tinypic.com/sq3xjn.png) -310px 0 no-repeat;
}

#n4 a:hover{
    background-position:-310px -23px;
}

#n5 a{
    width:128px;
    background: transparent url(http://i60.tinypic.com/sq3xjn.png) -399px 0 no-repeat;
}

#n5 a:hover{
    background-position:-399px -23px;
}