Horizontal Menus with Images Using CSS

I have been working on website templates for quite some time now and I guess a technique that I commonly use is worth sharing.

If you would like to use images for your menus, here's a good technique I found from CSS Play (although I can't find the specific link that directs to the technique). I have tested it on Firefox and IE6+ and seems to work perfectly. Anyways, here's how I use it. In my templates I use this html code:

GeSHi © 2004-2007 Nigel McNie, 2007-2008 Benny Baumann, 2008 Milian Wolff

1. <div id="menu">
2.    <ul>
3.       <li><a class="link1" href="#">Home</a></li>
4.       <li><a class="link2" href="#">About Us</a></li>
5.       <li><a class="link3" href="#">Services</a></li>
6.       <li><a class="link4" href="#">Projects</a></li>
7.       <li><a class="link5" href="#">Contact Us</a></li>
8.    </ul>
9. </div>

And this is the CSS code:

GeSHi © 2004-2007 Nigel McNie, 2007-2008 Benny Baumann, 2008 Milian Wolff

1. #menu { width: 800px; margin: auto; }
2.  
3. #menu ul {
4.    list-style: none;
5.    padding: 0;
6.    margin: 0;
7. }
8.  
9. #menu li {
10.    display: block;
11.    float: left;
12. }
13.  
14. #menu a {
15.    display: block;
16.    height: 0;
17.    width: 160px;
18.    padding-top: 40px;
19.    overflow: hidden;
20. }
21.  
22. .link1 { background: url('images/home.gif') no-repeat; }
23.  
24. .link2 { background: url('images/about.gif') no-repeat; }
25.  
26. .link3 { background: url('images/services.gif') no-repeat; }
27.  
28. .link4 { background: url('images/projects.gif') no-repeat; }
29.  
30. .link5 { background: url('images/contact.gif') no-repeat; }

Quite long eh? Anyways, it's pretty self-explanatory I guess. If not, I think trying it and experimenting with each line would be best to know how it works.