Dymond Dymond - 6 months ago 17
CSS Question

navigation moves on bold hover

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.

My hover css.

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

}


I have created a jsFiddle to show the problem.

http://jsfiddle.net/sM3AF/

Thanks

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

Giving each link a certain width will fix this issue... Use % for a more responsive design.