A little help with basic sprite stuff

I'm a design student and I'm at the end of my Web design I course. I'm working on my final site, but I'm having trouble with sprites (something we went over in one class, which I followed, but now I can't seem to figure it out). It's the first time I'm trying to use sprites for a site I'm making for the class. Anyway, I've looked over some sites with tutorials and I've managed to get things to work this far... here is my html (for the navigation):

  [ul id="list"]
    [li id="home"][a href="index.html"]home[/a][/li]
    [li id="profile"][a href="profile.html"]profile[/a][/li]
    [li id="work1"][a href="work-1.html"]1[/a][/li]
  [/ul]

Here is the CSS:

nav  {
  display:block;
  position: absolute;
  right:0;
  top: 0;
  z-index:2;
}

list {
  background: url("../images/sprite-1.gif") no-repeat;
  list-style: none;
  width: 200px;
  height:250px;
  margin:0;
  padding:0;
}

list li, list a {
  displa开发者_JAVA技巧y:block;
  height:25px;
}

home a:hover {
  display:block;
  height:25px;
  background-position:0px 75px;
}

Sorry for the crude display of the codes; I can't figure out how to display this properly. What is wrong with the way I have set things up? Here, the links work, and I can worry about hiding the text links later. However, I can't figure out how to apply hover images for each item in my list.

Thank you,

Michael

---

You're going to want something more like:

.cssnav img {width: 100%; height: 100%; border: 0; }
* html a:hover {visibility:visible}
.cssnav a:hover img{visibility:hidden}

where in this case cssnav is your class id

edit: you might also want to add the "css" tag to your question