Basic CSS Nav Bar

So today I thought I'd share with everyone my simple way of making a very effective and dynamic Navigation Bar using CSS.
Here is the finished example: http://yallara.cs.rmit.edu.au/~s3166403/silentmountain/index.html
This example could have been done using embed fonts and mouse over colours very easily, but with this way of working you can achieve much cooler effects, such as buttons that give the look of animation without using flash.

Step 1: The CSS Code

#nav {
 position: relative;
 top: 490px;
 width: 948px;
 height: 75px;
}

#nav ul {
    float: left;
    padding: 0;
    margin: 0;
    list-style: none;
}

#nav li {
    float: left;
 margin: 0 30px 0 0;
    width: auto;
 
 
}

#nav a {
    display: block;
    width: auto;
    background-position:  0 0;
    text-indent: -9999px;
    height: 25px;
    background: url(nav.png) no-repeat 0 0;
}


#nav a#home {
    width: 120px
}

#nav a#home:hover {
    background-position:  0 -25px;
}

#nav a#home.active {
    background-position:  0 -50px;
}

#nav a#filminfo {
    width: 95px;
    background-position:  -145px 0;
}

#nav a#filminfo:hover {
    background-position:  -145px -25px;
}

#nav a#filminfo.active {
    background-position:  -145px -50px;
}

 
#nav a#gallery {
    width: 74px;
    background-position:  -267px 0;
}

#nav a#gallery:hover {
    background-position:  -267px -25px;
}

#nav a#gallery.active {
    background-position:  -267px -50px;
}

    

This code uses this image:

I've edited the code to only include it for the first 3 parts, as you can see it works by moving the image around to where you want it to show, so when it's normal it displays white, green when it's moused over, and blue when the page is active.
You can easily create your own nav.png, I like to use Adobe Fireworks as it's easy to get the pixel locations, also PNGs can be transparent unlike most other common web image formats.

Lastly you need to use this code in your HTML document:

               <div id="nav">
                  <ul>
                    <li><a  class="active" id="home" href="/">Home</a></li>                 
                    <li><a  href="" id="filminfo" title="Film Info">Bookings</a></li>
                    <li><a href="" id="gallery" title="Gallery">Rates</a></li>
                    <li><a  href="datestimes.html" id="datestimes" title="Dates and Times">Club History</a></li>
                    <li><a  href="" id="competition" title="Competition">Availability</a></li>
                    <li><a href="" id="links" title="Links">Tour</a></li>
                    <li><a  href="" id="games" title="Games">Contact</a></li>
                </ul>
              </div><!-- Close nav -->

As you can see, by replacing the HREF statement with class="active" you can tell the document that you with that part to be blue for my example.

And here is an example of it working in action: http://yallara.cs.rmit.edu.au/~s3166403/silentmountain/index.html