如何避免将鼠标悬停在菜单项上以影响右侧的菜单项

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/

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;
}

2 个解决方案

#1

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

如果你坚持...... http://jsfiddle.net/thirtydot/QKBUS/18/

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

添加text-align:center到ul#menu,然后使用这个JavaScript(使用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();
});

#2

The above can be easily avoided by giving a fix width to the list items but that would make the first one look too off from others, so you will have to use different width for the first one.

通过为列表项提供固定宽度可以很容易地避免上述情况,但这会使第一个看起来与其他项目相差太远,因此您必须为第一个使用不同的宽度。

#1