I have programmed a menu with 2 hovers (class), one that makes the text rise and another that makes the text bold.
But when I put the mouse over the words the others on the side move, this is known as CSS Jitter, but I can not fix it.
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: link