1. HTML
<ul id="navMenu">
<li><a href="#">Test 1</a></li>
<li><a href="#">Test 2</a></li>
<li><a href="#">Test 3</a></li>
<li><a href="#">Test 4</a></li>
<li><a href="#">Test 5</a></li>
<li><a href="#">Test 6</a></li>
</ul>
2. CSS
body {
background:#222;
}
#navMenu {
margin:0;
padding:0;
list-style:none;
font-family:arial;
text-align:center;
line-height:60px;
}
#navMenu li {
float:left;
/* default background image */
background:url(default.jpg) no-repeat center center;
/* width and height of the menu item */
width:120px;
height:70px;
/* simulate pixel perfect using border */
border-left:1px solid #111;
border-right:1px solid #333;
border-top:1px solid #555;
border-bottom:1px solid #333;
/* must set it as relative, because .hover class top and left with absolute position will be positioned according to li. */
position:relative;
}
#navMenu li a {
/* z-index must be higher than .hover class */
z-index:20;
/* display as block and set the height according to the height of the menu to make the whole LI clickable */
display:block;
height:70px;
position:relative;
color:#777;
}
#navMenu li .hover {
/* mouseover image */
background:url(over.jpg) no-repeat center center;
/* must be postion absolute */
position:absolute;
/* width, height, left and top to fill the whole LI item */
width:120px;
height:70px;
left:0;
top:0;
/* display under the Anchor tag */
z-index:0;
/* hide it by default */
display:none;
}
#navMenu li.selected {
/* selected image */
background:url(selected.jpg) no-repeat center center;
}
3. Javascript
$(document).ready(function () {
//Append a div with hover class to all the LI
$('#navMenu li').append('<div class="hover"><\\/div>');
$('#navMenu li').hover(
//Mouseover, fadeIn the hidden hover class
function() {
$(this).children('div').fadeIn('1000');
},
//Mouseout, fadeOut the hover class
function() {
$(this).children('div').fadeOut('1000');
}).click (function () {
//Add selected class if user clicked on it
$(this).addClass('selected');
});
});
| 
