Cool Sprites – Free overlapped CSS menu using CSS Sprites

CSS sprites can be termed as a method for reducing the number of image requests to a web page by combining multiple images into a single image, and display the desired segment using CSS background-image and background-position properites. Now that almost all major browsers started supporting CSS background-image and background-position properties, CSS sprites are getting more significance.

 

Sample HTML Code

div class="navi1">

Sample CSS Code

.navi1 {
display:block;
height:72px;
margin:0 auto;
position:relative;
width:525px; }
.navi1 ul {
float:none;
list-style-image:none;
list-style-type:none;
margin:3px 0; }
.navi1 ul li {
background-image:url(tab-1.png);
background-repeat:no-repeat;
float:left;
height:72px;
margin:0px;
padding-top:5px;
position:absolute; }
.navi1 ul li a {
display:block;
height:100%;
width:100%; }
.navi1 ul li.sm1 {
background-position:0 0;
left:0px;
width:125px; }
.navi1 ul li.sm2 {
background-position:-125px 0;
left:100px;
width:124px; }
.navi1 ul li.sm3 {
background-position:-249px 0;
left:200px;
width:124px; }
.navi1 ul li.sm4 {
background-position:-373px 0;
left:300px;
width:125px; }
.navi1 ul li.sm5 {
background-position:-498px 0;
left:400px;
width:126px; }
.navi1 ul li:hover {
z-index:1000; }
.navi1 ul li.sm1:hover {
background-position:0 -75px; }
.navi1 ul li.sm2:hover {
background-position:-125px -75px; }
.navi1 ul li.sm3:hover {
background-position:-249px -75px; }
.navi1 ul li.sm4:hover {
background-position:-373px -75px; }
.navi1 ul li.sm5:hover {
background-position:-498px -75px; }