Проблема с прыгающим меню

Приветствую всех.Помогите пожалуйста.Мне нужно сделать обычное горизонтальное меню с 4-мя ссылками.Расстояние между ссылками должно быть строго 50px и при наведении мышки на пункт меню текст должен становиться жирным
а:hover{font-weight:bold}.
Проблема в том,что из-за "font-weight:bold" и установленного "паддинга" в 50 px между тегами "li", при наведении на ссылку меню начинает смещаться.Мне нужно,чтобы остальные ссылки были неподвижны.Как это сделать?

 

Код:

        <nav>
       <ul>
           <li><a href="index.html">о компании</a></li>
           <li><a href="uslugi.html">услуги</a></li>
                <li><a href="price.html">цены</a></li>
                    <li><a href="contacts.html">контакты</a></li>

       </ul>
        </nav>

<style>
nav ul{
    padding-left: 85px;
    list-style: none;
    width: 100%;
}
nav ul li{
    float: left;
    list-style: none;
    font: 22px Tahoma;
    color: black;
    margin-right: 50px;
}

a{
    text-decoration: none;
    color: black;
}

a:hover{
    color: #e2001a;
    font-weight: bold;
}

</style>

 

http://jsfiddle.net/p5tf58kd/ - Живой пример

 

Сделать не a:hover {font-weight: bold;},
а
li:hover {padding: 48px;}
li:hover a {font-weight: bold;}
То есть при увеличении высоты li из за жирности, у вас должен уменьшиться паддинг (значение 58 пикселей придумал наугад, подберите, какое нужно).

 

Спасибо за советы,но к сожалению не помогли оба варианта.Как ни подставляй,соседние ссылки всё равно смещаются,либо все,либо какая-то из них.

 

Ссылки не смещаются,но расстояние то между ними уже не 50px,а больше.Width в 25% прибавил к
"margin-right: 50px" ещё ширину блока и расстояние увеличилось ещё больше. То есть мне нужно,чтобы все ссылки ровно одинаково друг от друга стояли,то есть расстояние от последней буквы 1-й ссылки до первой буквы 2-й ссылки было 50px.Надо как-то сделать так,чтобы ссылки были блочными,но ширина блока была равна чётко длине текста и не более.Или может можно добиться другим путём...