Dymond Dymond - 2 years ago 92
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.



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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download