JSFiddle - React, Tailwind, and code Playground
HTML
<div id="menu">
<ul id="navigation">
<li><a href="#home"><div><img src="http://capitalpay.co.uk/images/but_hov.png"/></div><span>Home</span></a></li>
<li><a href="#vending"><div><img src="http://capitalpay.co.uk/images/but_hov.png"/></div><span>Vending machine</span></a></li>
<li><a href="#videos"><div><img src="http://capitalpay.co.uk/images/but_hov.png"/></div><span>Videos</span></a></li>
<li><a href="#about"><div><img src="http://capitalpay.co.uk/images/but_hov.png"/></div><span>About</span></a></li>
<li><a href="#contact"><div><img src="http://capitalpay.co.uk/images/but_hov.png"/></div><span>Contact</span></a></li>
</ul>
</div>
CSS
html, body {
font-family: Myriad, Avant Garde, Droid Sans, Arial, sans-serif;
}
body {
background:url(http://capitalpay.co.uk/images/top_bg.png);
}
#menu {
position:relative;
top:100px;
margin: 0 auto;
min-height: 50px;
background:url(http://capitalpay.co.uk/images/menu.png) repeat-x center;
}
#navigation {
margin:0;
padding:0;
text-align:center;
list-style:none;
height:46px;
}
#navigation li {
display:inline-block;
border-right:1px solid #444;
background:transparent url('http://capitalpay.co.uk/images/but.png') no-repeat center;
width:151px;
height:46px;
padding:0 10px;
}
#navigation a {
font-size:small;
font-weight:bold;
text-shadow:1px 0 0 #000;
color:white;
display:block;
text-decoration:none;
position:relative;
}
#navigation div {
width:151px;
height:46px;
position:absolute;
opacity:0;
filter:alpha(opacity=0);
}
#navigation span {
display:block;
padding-top:16px;
position:relative;
}
#navigation img {
border:none;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF); /* IE6 & 7 */
zoom: 1;
}
JavaScript
$('li').hover(function(){
$('div', this).css({opacity:0}).stop().animate({opacity:1},400);
}, function() {
$('div', this).stop().animate({opacity:0},400);
});