title: Equal length background box around links on a:hover
body: <p>I'm trying to make a list with links but the thing is I want text background to be equal length. That works perfectly if all the words are the same length but for longer words it just streches them out and they are not lined equally.
  This is what I mean:</p>
  
  <p><img src="https://i.stack.imgur.com/ffn7U.jpg" alt="http://img812.imageshack.us/img812/3589/screenshot019d.jpg"></p>
  
  <pre><code>    &lt;div id="menu"&gt;
              &lt;a href="#"&gt;Pealeht&lt;/a&gt;&lt;br /&gt;
              &lt;a href="#"&gt;Treening&lt;/a&gt;&lt;br /&gt;
              &lt;a href="#"&gt;Toitumine&lt;/a&gt;&lt;br /&gt;
              &lt;a href="#"&gt;Galerii&lt;/a&gt;&lt;br /&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>a:link {
      color: white;
      text-decoration: none;
      padding: 10px;
  }      /* unvisited link */
  a:visited {
      color: white;
      text-decoration: none;
  }  /* visited link */
  a:hover {
      color: white;
      background-color: #C00;
      padding: 5px 100px;
      font-size: 14px;
  }  /* mouse over link */
  a:active {
      color: white;
      background-color: #C00;
      padding: 5px 100px;
      font-size: 14px;
  }  /* selected link */
  </code></pre>
  
  <p>Any ideas?</p>