Dymond Dymond - 9 months ago 42
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 {


I have created a jsFiddle to show the problem.



#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.