Anchored links(“ ul li a”) when hovering

Question

I'm trying to stop moving objects when hovering.

See what i'm doing here > JSFIDDLE

When hovering the second link (TEST2), it changes to bold property (need to be), but it pushes the other button (TEST) to the left. How can i anchor other elements in the header and stop their movement?

Answer 1

give an item class to normal list elements and seperator class to seperator list element

<div class="header-bg">
  <div class="container">
    <div class="menu-header">
      <nav>
        <ul>
          <li class="item"><a href="#">Test</a></li>
          <li class="seperator"><span>&there4;</span></li>
          <li class="item"><a href="#">Test2</a></li>
        </ul>
      </nav>
    </div>
  </div>
</div>

and give a fixed width to list elements at .item class

.item {
    width:70px;
}

working demo

Answer 2

给他们一个固定的宽度，即width：80px