title: Using CSS Sprites?
body: <p>I'm trying to do a navigation bar using css sprites. I have the image but it's just a matter of the code now. At the moment it is:</p>
  
  <pre><code>.navi a{
  display:block;
  float:left;
  height:40px;
  overflow:hidden;
  background-position:left top;
  }
  navi a:hover img{
  margin-top:-40px;
  }
  </code></pre>
  
  <p>and the html is:</p>
  
  <pre><code>&lt;div class="topbar"&gt;
  &lt;img alt="title" src="title.png"/&gt;&lt;br/&gt;
  &lt;div class="navi"&gt;
  &lt;a href="index.html" class="home"&gt;&lt;img src="home_up.png"/&gt;&lt;/a&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>All I have working is the normal image, the height is correct and it crops the rest of the image off, but when I hover it doesn't do anything. Any suggestions? Thank you</p>