title: Problem creating CSS background image sprites with absolute positioning
body: <p>I have 2 images that I would like to use as links with a hoverover effect. All over the images and hoverover images exist on a single png file.</p>
  
  <p>The problem I am having is that the first image works just fine, but the second image appears with both the hoverover image beginning at top:0 and the image I want to be seeing directly below it. If I change <code>#MCD a{</code> to <code>#MCD{</code> then the image displays correctly but all linking functionality for the image disappears.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;ul id="sites"&gt;
  &lt;li id="LL"&gt;&lt;a href="" /&gt;&lt;/li&gt;
  &lt;li id="MCD"&gt;&lt;a href="" /&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#sites{
  position:absolute;
  margin:0;
  padding:0;
  top:250px;
  left:700px;
  width:500px;
  background:transparent;
  display:block;
  }
  
  #sites li{
  position:absolute;
  list-style:none;
  right:0;
  }
  
  #LL a{
  display:block;
  width:442px;
  height:43px;
  background:url(sitesprites.png) 0 0;
  }
  
  #LL a:hover{
  background:url(sitesprites.png) 0 -44px;
  }
  </code></pre>
  
  <p><strong>Edited per the responses I have received</strong>  </p>
  
  <pre><code>#MCD a{
  position:absolute;
  display:block;
  right:0;
  top:78px;
  width:384px;
  height:54px;
  background:url(sitesprites.png) left -88px;
  }
  
  #MCD a:hover{
  background-position:left -143px;
  }
  </code></pre>
  
  <p>Here is a jsFiddle: <a href="http://jsfiddle.net/lipestyle/77a2z/" rel="nofollow">http://jsfiddle.net/lipestyle/77a2z/</a></p>