Inline elements shifting when made bold on hover

I created a horizontal menu using a HTML lists and CSS. Everything works as it should except when you hover over the links. You see, I created a bold hover state for the links, and now the menu links shift because of the bold size difference.

I encounter the same problem as this SitePoint post. However, the post does not have proper solution. I've searched everywhere for a solution and can't find one.Surely I can't be the only one trying to do this.

Does anyone have any ideas?

P.S: I don't know the width of the text in menu items so I cannot just set the width of the li items.

.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>