Criei um menu horizontal usando listas HTML e CSS. Tudo funciona como deveria, exceto quando você passa o mouse sobre os links. Veja bem, eu criei um estado de foco em negrito para os links, e agora os links do menu mudam devido à diferença de tamanho em negrito.
Encontro o mesmo problema que esta postagem do SitePoint . No entanto, a postagem não possui solução adequada. Procurei em toda parte por uma solução e não consigo encontrar uma. Certamente não posso ser o único a tentar fazer isso.
Alguém tem alguma idéia?
PS: Não sei a largura do texto nos itens de menu, por isso não posso apenas definir a largura dos itens de 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>