导航在粗体悬停时移动

Question

当我悬停我的导航时，它向右移动约5px。 悬停设置为字体粗体：粗体。所以我知道这是问题的大胆部分。 如果我在导航边距下方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; 
} 

给予各个环节一定的宽度将解决这个问题...反应更加灵敏的设计使用％。