CSS Jitter in Hover menu

Question

I programmed a menu with 2 hovers (class), one that makes the text go up and another that makes the text go Bold.

But when I put the mouse over the words the other words on the side move, this is known as CSS Jitter, but I’m not getting it fixed.

HTML

<div id="header">
   <ul>
     <li id="agenda-link"><a class="float" class="scroll" href="#agenda">Agenda</a></li>
     <li id="musicas-link"><a class="float" class="scroll" href="#musicas">Músicas</a></li>
     <li id="compre-link"><a class="float" class="scroll" href="#compre">Compre</a></li>
     <li id="contato-link"><a class="float" class="scroll" href="#contato">Contato</a></li>   
  </ul>
</div>  <!-- END header -->

CSS

#header {
    font: 28px 'Open Sans', sans-serif;
    font-weight: 300;
    width: 80%;
    margin: 0 auto;
    height:90px;
}
#header ul {
    width: 65%;
    list-style:none;
    position:relative;
    top:40%;
}
#header li {
    display:inline;
    padding-left:8%;
}
#header li a {
    text-decoration:none;
    color:#cebc85;
}
#header li a:hover {
    color:#cebc85;
    font-weight:400;
}

/* Float */
.float {
  display: inline-block;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
.float:hover, .float:focus, .float:active {
  -webkit-transform: translateY(-5px);
  transform: translateY(-5px);
}

Demo: http://jsfiddle.net/LBJZV/

Answer 1

I see the problem only in Internet Explorer and Safari. Your code seems to work in Chrome and Firefox, but there are some issues as below:

To define two classes for an element, you are doing

<a class="float" class="scroll" href="#agenda">Agenda</a>

Change to

<a class="float scroll" href="#agenda">Agenda</a>

The unwanted effect occurs, because the width of the li is not defined and the width changes according to the text, there is no way to avoid this without setting a width. To remove this undesired effect, I suggest the following amendments:

Alter your CSS of

#header ul {
    width: 65%;
    list-style:none;
    position:relative;
    top:40%;
}

#header li {
    display:inline;
    padding-left:8%;
}

To

 #header ul {
    width: 80%;
    display: table;
    table-layout: fixed;
    list-style:none;
    position:relative;
    top:40%;
}

#header ul li {
    display: table-cell;
    width: auto;
    text-align: center;
    padding-left:8%;
}

Demo: http://jsfiddle.net/LBJZV/9/