title: navigation moves on bold hover
body: <p>When I hover my navigation, it moves about 5 px to the right. 
  The hover is set with a font-weight: bold. So i know that's the bold part that's the problem.
  If i ad a margin-right 5px below the margin on the navigation, the hover actually gets bold without moving the first navigation link, but when I'm hovering the others the problem starts again.</p>
  
  <p>My hover css.</p>
  
  <pre><code>#nav ul li a:hover { 
  border-color:#ccc;
  font-weight:bold;
  margin-right:35px;
  
  }
  </code></pre>
  
  <p>I have created a jsFiddle to show the problem.</p>
  
  <p><a href="http://jsfiddle.net/sM3AF/" rel="nofollow">http://jsfiddle.net/sM3AF/</a></p>
  
  <p>Thanks</p>