J'ai créé un menu horizontal en utilisant une liste HTML et CSS. Tout fonctionne comme il se doit, sauf lorsque vous survolez les liens. Vous voyez, j'ai créé un état de survol en gras pour les liens, et maintenant les liens de menu changent en raison de la différence de taille en gras.
Je rencontre le même problème que ce message SitePoint . Cependant, le poste n'a pas de solution appropriée. J'ai cherché une solution partout et je n'en trouve pas. Je ne peux sûrement pas être le seul à essayer de faire ça.
Quelqu'un a-t-il une idée?
PS: Je ne connais pas la largeur du texte dans les éléments de menu, donc je ne peux pas simplement définir la largeur des éléments li.
.nav { margin: 0; padding: 0; }
.nav li {
list-style: none;
display: inline;
border-left: #ffffff 1px solid;
}
.nav li a:link, .nav li a:visited {
text-decoration: none;
color: #000;
margin-left: 8px;
margin-right: 5px;
}
.nav li a:hover{
text-decoration: none;
font-weight: bold;
}
.nav li.first { border: none; }
<ul class="nav">
<li class="first"><a href="#">item 0</a></li>
<li><a href="#">item 1</a></li>
<li><a href="#">item 2</a></li>
<li><a href="#">item 3</a></li>
<li><a href="#">item 4</a></li>
</ul>