JSFiddle - React, Tailwind, and code Playground

HTML

<div id="nav">

    <ul>

     <li id="h"><a href="http://www.netdreams.co.uk" class="on">Home</a></li>

     <li id="w"><a href="http://www.netdreams.co.uk/index.php/what-we-do/">What We Do</a></li>

     <li id="s"><a href="http://www.netdreams.co.uk/index.php/showcase/">Showcase</a></li>

     <li id="v"><a href="http://www.netdreams.co.uk/index.php/video/">Video</a></li>

     <li id="b"><a href="http://www.netdreams.co.uk/index.php/blog/">Blog</a></li>

     <li id="c"><a href="http://www.netdreams.co.uk/index.php/contact/">Contact</a></li>

    </ul>



    <a href="#" id="mc" class="mca" onclick="mc.toggle(1);return false;">Media Center</a>

    <a href="#" id="mc-pulse" class="mca" onclick="mc.toggle(1);return false;">Media Center</a>


   </div>

CSS

*{
    margin:0;
    padding:0;
}
div#nav ul li a{background:url(http://www.netdreams.co.uk/wp-content/themes/netdreams/css/blue/nav.png) no-repeat;}
div#nav{
  float:left;
  clear:both;
  width:993px;
  height:52px;
  margin:22px 0 0;
  background:url(http://www.netdreams.co.uk/wp-content/themes/netdreams/css/images/nav-bg.png) 0 0 no-repeat;
 }
 div#nav ul{
   float:left;
   width:700px;
   height:52px;
   list-style-type:none;
  }
   div#nav ul li{
    float:left;
    height:52px;
   }
    div#nav ul li a{
     border:0;
     height:52px;
     display:block;
     line-height:52px;
     text-indent:-9999px;
    }
  div#nav ul li#h a{width:98px;background-position:0 0;}
  div#nav ul li#w a{width:134px;background-position:-98px 0;}
   div#nav ul li#s a{width:123px;background-position:-232px 0;}
  div#nav ul li#v a{width:95px;background-position:-355px 0;}
  div#nav ul li#b a{width:89px;background-position:-450px 0;}
  div#nav ul li#c a{width:114px;background-position:-539px 0;}
   div#nav ul li#h a:hover, div#nav ul li#h a.on{background-position:0 -52px;}
     div#nav ul li#w a:hover, div#nav ul li#w a.on{background-position:-98px -52px;}
     div#nav ul li#s a:hover, div#nav ul li#s a.on{background-position:-232px -52px;}
    div#nav ul li#v a:hover, div#nav ul li#v a.on{background-position:-355px -52px;}
     div#nav ul li#b a:hover, div#nav ul li#b a.on{background-position:-450px -52px;}
     div#nav ul li#c a:hover, div#nav ul li#c a.on{background-position:-539px -52px;}
   div#nav a.mca{
   float:right;
   width:118px;
   height:28px;
   display:inline;
   text-indent:-9999px;
   margin:11px 10px 0 0;
   background:url(http://www.netdreams.co.uk/wp-content/themes/netdreams/css/images/media-centre.png) 0 -28px no-repeat;
  }
   div#nav a#mc-pulse{
   display:none;
   margin-right:-118px;
   background-image:url(http://www.netdreams.co.uk/wp-content/themes/netdreams/css/images/media-centre-pulse.png);
  }
  div#nav a.t{
   background-position:0 0;
  }