Sliding navigation with single image

Simplicity is the best tool and we know it. So this tutorial is all about a simple and very effective navigation bar. This tutorial is all about CSS. There is no jquery or javascript and still it has very great effects.
For proffesional users who want simplicity and give more prefrence to their content rather than effects can go with that one.
We all know more effects take more time to load the page. Here is the solution. This tutorial contains a single image which slides as you move your mouse cursor. Simple lines of html code and small amount of css code is required to do this. Here we go......

Download Code

Html Code:

<ul class="green">
 <li><a href="#" title="home" class="current"><span>home</span></a></li>
    <li><a href="#" title="products"><span>products</span></a></li>
    <li><a href="#" title="blog"><span>blog</span></a></li>
    <li><a href="#" title="contact"><span>contact</span></a></li>
</ul>

<ul class="blue">
 <li><a href="#" title="home" class="current"><span>home</span></a></li>
    <li><a href="#" title="products"><span>products</span></a></li>
    <li><a href="#" title="blog"><span>blog</span></a></li>
    <li><a href="#" title="contact"><span>contact</span></a></li>
</ul>

Screen Shot:

Css Code:

Css for unordered list and its position is:

ul {
 padding: 5px;
 margin: 10px 0;
 list-style: none;
 background-color: #fff;
 border-bottom: 1px solid #e7e7e7;
 float: left;
 clear: left;
}

ul li {
 float: left;
 display: inline; /*For ignore double margin in IE6*/
 margin: 0 10px;
}

ul li a {
 text-decoration: none;
 float:left;
 color: #999;
 cursor: pointer;
 font: 900 14px/22px "Arial", Helvetica, sans-serif;
}

ul li a span {
 margin: 0 10px 0 -10px;
 padding: 1px 8px 5px 18px;
 position: relative; /*To fix IE6 problem (not displaying)*/
 float:left;
}

Css for navigation and its hover effects are here :

ul.red li a:hover {
  color: #fff;
 background: url(images/red.png) no-repeat top right;
}

ul.red li a:hover span {
 background: url(images/red.png) no-repeat top left;
}

ul.red li a.current {
 background: url(images/red.png) no-repeat top right;
  color: #fff;
}

ul.red li a.current span {
 background: url(images/red.png) no-repeat top left;
}

Hope you will like this post.