JSFiddle - React, Tailwind, and code Playground
HTML
<div role="navigation" id="access">
<div class="menu-header">
<ul class="menu" id="menu-site_nav">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-26" id="menu-item-26"><a href="http://localhost/scanmanuk.com/?page_id=6">Our Services</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-24" id="menu-item-24"><a href="http://localhost/scanmanuk.com/?page_id=8">About Us</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-23" id="menu-item-23"><a href="http://localhost/scanmanuk.com/?page_id=10">Case Studies</a></li>
</ul>
</div> </div>
CSS
#access .menu-header ul {
list-style: none;
margin-top: 85px;
}
#access .menu-header ul li {
display: inline-block;
*display: inline;/*For IE7*/
*zoom:1;/*For IE7*/
vertical-align:top;
}
.menu-header ul li a{
display:block;
padding: 70px 55px;
}
#access .menu-header ul li#menu-item-26 a{
background: url(http://i41.tinypic.com/345h0cw.png) no-repeat;
}
#access .menu-header ul li#menu-item-24 a{
background: url(http://i43.tinypic.com/15cikhs.jpg) no-repeat;
}
#access .menu-header ul li#menu-item-23 a{
background: url(http://i39.tinypic.com/dca82q.png) no-repeat;
}