Question

I have an extremely simple horizontal menu. I wanted to font to become bold on hover. The thing is when I make the hover the text becomes bold but all menu items on the right switch to the right by few pixels. Hope someone can help me understand how to avoid that. thank you.

FIDDLE : : http://jsfiddle.net/QKBUS/

HTML :

<div id="header">
  <ul id="menu">
    <li class="bouton_gauche"><a href="">agenda</a></li>
    <li class="bouton_gauche"><a href="">messagerie</a></li>
    <li class="bouton_gauche"><a href="">communautée</a></li>
    <li class="bouton_gauche"><a id="btn-deconnexion" href="">déconnexion</a></li>
    <li class="bouton_droite"><a href="">[logo]</a></li>
  </ul>
</div>​

CSS :

ul#menu { 
list-style-type : none; 
}

li.bouton_gauche {
float : left;
margin-right:15px;
}

li.bouton_droite {
float : right;
}

ul#menu a{
text-decoration: none;
}

ul#menu a:hover{
font-weight: bold;
}​

Answer 1

If you insist… http://jsfiddle.net/thirtydot/QKBUS/18/

Add text-align: center to ul#menu, then use this JavaScript (uses jQuery):

$('#header li a').each(function() {
    var temp = $(this).hide().clone().appendTo($(this).parent()).css('font-weight', 'bold').show();
    $(this).show().parent().width(temp.width());
    temp.remove();
});​