导航在大胆的悬停上移动

Question

当我悬停导航时，它向右移动大约5像素。 悬停设置为font-weight：bold。所以我知道这是问题的大胆部分。 如果我在导航边缘下方5px左右边距，则悬停实际上会在不移动第一个导航链接的情况下变为粗体，但是当我徘徊其他链接时，问题又会重新开始。

我的悬停css。

#nav ul li a:hover { 
border-color:#ccc;
font-weight:bold;
margin-right:35px;

}

我创建了一个jsFiddle来显示问题。

http://jsfiddle.net/sM3AF/

由于

Answer 1

#nav ul li {
  display: inline-block;
  position: relative;
  border-right: solid 1px #e1e1e1;
  margin: 0px;
  width: 100px;
}

为每个链接指定一定的宽度将解决此问题...使用％表示更具响应性的设计。