title: How to get 'hover' and 'active' states working with CSS and HTML?
body: <p>I have 3 menu items in a header at the top of my website (it's not live at the moment so I can't provide a link - sorry). The 3 'buttons' are not buttons in the CSS buttons sense - they're text rendered to images (Not ideal, I know but they look pretty, so...).</p>
  
  <p>Anyway, each image contains differing versions: 1 for the default appearance, 1 for mouseover and another for onclick/active. The html and CSS I'm using so far looks like this:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;li&gt;
      &lt;a id="About" class="button" href="About Us.cshtml"&gt;About Us&lt;/a&gt;
  &lt;/li&gt;
  &lt;li style="margin-left: 30px;"&gt;
      &lt;a id="Services" class="button" href="Services.cshtml"&gt;Services&lt;/a&gt;
  &lt;/li&gt;
  &lt;li style="margin-left: 30px;"&gt;
      &lt;a id="Contact" class="button" href="Contact Us.cshtml"&gt;Contact Us&lt;/a&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#About {background: url(../Buttons/About.png) no-repeat 0 0; width: 87px;}
  #Services {background: url(../Buttons/Services.png) no-repeat 0 0; width: 112px;}
  #Contact {background: url(../Buttons/Contact.png) no-repeat 0 0; width: 117px;}
  a.button {height: 20px; display: inline-block;}
  a.button:hover {background-position: 0 -20px;}
  a.button:active {background-position: 0 -40px;}
  </code></pre>
  
  <p>For one reason or another, the 'hover' and 'active' states are having no effect. I note that if I define classes for each of the buttons instead of id's, it works fine - but this makes no sense to me. The buttons each have their own image and widths and so are unique (which is why I've given them id's rather than classes).</p>
  
  <p>Can anyone explain where I'm going wrong? I'm new to all this so any explanations will need to be in laymen's terms.</p>