title: Background Color change on a:hover
body: <p>So I basically want to take a navigation i created with div's and make it so that each line (id) will rollover a different color.</p>
  
  <p>I've tried a ton of different ways of doing it and I'm getting stuck with using the ID correctly I believe.</p>
  
  <pre><code>&lt;div class="navcontainer"&gt;
          &lt;div id="1"&gt;&lt;a href="#"&gt;home&lt;/a&gt;&lt;/div&gt;
          &lt;div id="2"&gt;&lt;a href="#"&gt;work&lt;/a&gt;&lt;/div&gt;
          &lt;div id="3"&gt;&lt;a href="#"&gt;resume&lt;/a&gt;&lt;/div&gt;
          &lt;div id="4"&gt;&lt;a href="#"&gt;about&lt;/a&gt;&lt;/div&gt;
          &lt;div id="5"&gt;&lt;a href="#"&gt;links&lt;/a&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the CSS</p>
  
  <pre><code>.navcontainer {
  font-family: Arial, Helvetica, sans-serif;
  font-size:24px;
  display:block;
  }
  .navcontainer div a {
  background-color:black;
  margin:2px;
  padding:2px;
  display:inline;
  float:left;
  clear:both;
  color:white;
  text-decoration:none
  }
  .navcontainer #1 a:hover {
  color:black;
  background-color:red;
  }
  .navcontainer #2 a:hover {
  color:black;
  background-color:orange;
  }
  </code></pre>