Help turning my image into nav using CSS sprites.

Hi I have a working nav system but it lags when you view it on the net due to the individual images used. Ive searched many sites looking for a sprites tutorial to get my nav to work and have had no success. The image I want to use can be seen here and the top button is the normal and the one underneath is the hover. Heres is the image and html i would like to use: http://www.be-graphics.com/sites/testing/Images/Nav/navalllong.jpg

<div id="menu">
<ul>
<li class="home" ><a href="../index.html" title="Home"><span>Home</span></a></li>
<li class="clients" ><a href="../clients.html" title="Clients"><span>Clients</span></a></li>
<li class="professionals"><a href="#" title="Professionals"><span>Professionals</span></a></li>
<li class="organisation"><a href="#" title="Organisation"><span>Organisation</span></a></li>
<li class="contact"><a href="#" title="Contact Us"></a><span>Contact Us</span></li> </ul>
</div>

The problematic CSS im using for this can be found here:

#menu {
width:205px;
height:174px;
font-size: 9px;
background-image:url(../Images/Nav/navalllong.jpg);
margin:0 0 0 25px;
overflow: hidden;
}

#menu ul li {
display: inline;
margin: 0px;
padding: 0px;
}

#menu ul li a {
display: block;
position:relative;
height: 35px;
}

#menu ul li a:hover {
background-image:url(../Images/Nav/navalllong.jpg);
}

#menu ul {
margin: 0px;
padding: 0px;
list-style-type:none;
height: 36px;
}

#menu span {
display: none;
}

#menu li.home a {background-position: 0px 0px;}
#menu li.clients a {background-position: 0px -35px;}
#menu li.professionals a {background-position: 0px -70px}
#menu li.organisation a {background-position: 0px -105px;}
#menu li.contact a {background-position: 0px -140px;}

#menu li.home a:hover {background-position: 0px -35px;}
#menu li.clients a:hover {background-position: 0px -70px}
#menu li.professionals a:hover {background-position: 0px -105px;}
#menu li.organisation a:hover {background-position: 0px -140px;}
#menu li.contact a:hover {background-position: 0px -175px;}


This is a 3 tier nav so I havent included all the code but I only need this to be turned into a sprites menu.

Any help will be greatly appreciated.

thx

Eddie

Take a look at this CSS and see if you can draw your changes from it.

#nav {list-style:none; height: 30px; width: 410px; position: relative; margin-left: 480px; margin-top: 25px; font: bold 10px/30px "lucida sans", "trebuchet ms", arial, sans-serif;}
#nav li { display: inline; /*IE7 fix */ margin-right: 5px;}
#nav a { float: left; height: 30px; text-align: center; color: #fff; position: relative;background: #006766;}
#nav li a:hover, #nav li a:focus, #nav li a:active {color:#fff; /*IE fix */
background: #015152;}
#nav a span { display: block; height: 30px;position: absolute; top: 0px;left: 0px;background: url(menu.jpg) no-repeat;}

#nav .home,#nav .home span {width: 80px;background-position: 0 0;}
#nav .home:active span, #nav .home:focus span,#nav .home:hover span {background-position: 0px -30px;}
#nav .tuts,#nav .tuts span {width: 105px;background-position: -90px 0;}
#nav .tuts:active span,#nav .tuts:focus span,#nav .tuts:hover span {background-position: -90px -30px;}
#nav .downloads,#nav .downloads span {width: 127px; background-position: -190px 0;}
#nav .downloads:active span, #nav .downloads:focus span,#nav .downloads:hover span {background-position: -190px -30px;}
#nav .contact, #nav .contact span {width: 80px; background-position: -326px 0;}
#nav .contact:active span, #nav .contact:focus span,#nav .contact:hover span {background-position: -326px -30px;}

This is from a working sprites menu I found at this address…
http://csscreator.com/node/29805
Hope it helps.

Yah i finally got my thing to work, thx for link but it was hard to use the example above as this was set for a horizontal nav system, all i had to do for mine was set the top to 0 for all and play with the dimensions.