При наведении, меню сайта прыгает как исправить?

Question

[Дмитрий]

Есть обычное меню в виде списка, с присвоением float сделал его горизонтальным, добавил padding между элементами списка, а также hover эффект в котором расстояние между буквами увеличивается, выглядит прикольно, но при наведении меню сдвигается налево. Первого элемента списка это не касается, если навестись на второй, то сдвигает первый, если навестись на третий, то сдвигается второй и первый и т.д. Как можно решить вопрос, не прибегая к flex-box и grid?
Сразу приношу извинения за столь глупый вопрос и ужасную формулировку, надеюсь на вашу поддержку. Спасибо!

Comments

[Александр]

Смотрите, какие стили влияют на "прыжки" при hover.

[Дмитрий]

.menu {
  float: right;
  
}

.menu_list {
  list-style-type: none;
  float: left;
  
 
}

.menu_link {
  color: #8c8c8c;
  font-size: 14px;
  font-weight: 300;
  text-transform: uppercase;
  text-decoration: none;
  padding: 10px 13px;
  
  
}

.menu_link:hover {
  color: #212121;
  font-weight: 700;
  letter-spacing: 1.4px;
  border-bottom: 3px solid #212121;
}

Собственно код

[Варлам Ерофеич]

Дмитрий, здесь сразу бросается в глаза .menu_link {font-weight: 300;} и .menu_link:hover {font-weight: 700;}
По этой ссылке наглядно можно узреть, насколько расширяется текст между насыщенностью 300 и 700...
(там есть пример текста и радиокнопки для сравнения)

[Дмитрий]

Варлам Ерофеич, я знаю что дело в толщине шрифта, вопрос в том, как решить проблему, что бы у меня в ховере шрифт увеличивался и при этом элементы меню не ездили

[Варлам Ерофеич]

Дмитрий, нужно, чтобы ширина кнопок была статической и не зависела от длины текста.
Длинный текст прятать в overflow: hidden;...

[Дмитрий]

Варлам Ерофеич, спасибо, с работы приду обязательно попробую

[Дмитрий]

Варлам Ерофеич, не помогло.

Answer 1

[WapSter]

Задай для ссылок фиксированную ширину, тогда они перестанут прыгать. Либо не трогай стили шрифта при ховере.

Comments

[Дмитрий]

Расскажите пожалуйста как это сделать? я для menu_link задал display:inline_block. для menu_link:hover width: 15px; У меню стало съезжать вниз и всторону. Играл со значениями ширины и ничего путного так и не вышло. Как реализовать ваш способ?

[WapSter]

Дмитрий, если без флекса то примерно вот так https://codepen.io/wapster92/pen/zYYOaWb . И ты не понимаешь суть, тебе размеры нужно указать до ховера, чтобы было пространство шрифту расширяться, конечно у тебя не получиться, и вообще это чисто задача на логику, в верстке и программировании ее все время нужно применять.

[Дмитрий]

Тимур Турсунбаев, Спасибо!