Неправильное поведение текста при наведении курсора на элемент меню

Question

При наведении на элементы меню, текст начинает "прыгать". Шрифт должен меняться с обычного на крупный (bold), а так же внизу должно появляться подчеркивание.

Пробовал использовать следующие вещи, но они не решили мою проблему:

solid transparent
Увеличивать пространство между элементами

Ниже представлен моего пример кода:

.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: 13px 15px;
  text-align: center;
}

.menu-link:hover {
  color: #212121;
  border-bottom: 3px solid #212121;
  font-weight: 700;
}

<a href="#"><img src="img/logo.svg" alt="logo"></a>
<ul class="menu clearfix ">
  <li class="menu-list"><a href="#" class="menu-link menu-link-active">HOME</a></li>
  <li class="menu-list"><a href="#" class="menu-link">PRODUCTS</a></li>
  <li class="menu-list"><a href="#" class="menu-link">HISTORY</a></li>
  <li class="menu-list"><a href="#" class="menu-link">SHOWROOM</a></li>
  <li class="menu-list"><a href="#" class="menu-link">CONTACT</a></li>
  <li class="menu-list">
    <a href="#" class=""><img src="img/search.svg" alt="search"></a>
  </li>
</ul>

Answer 1

Я немного переделал ваш код.

Использовал для меню flex-box, чтобы объекты были в ряд.
Вместо <ul> и <li> использовал просто <a>, чтобы не прописывать отдельно в CSS строчки по удалению bullet points.
Использую text-stroke. Не работает в IE( https://caniuse.com/#feat=text-stroke)

html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

nav {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 70px;
  background-color: pink;
}

.nav-logo {
  height: 100%;
  width: 200px;
}

.nav-logo>img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

.nav-items {
  display: flex;
  flex-direction: row;
  height: 100%;
}

.nav-items>a {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  text-decoration: none;
}

.nav-items>a>span {
  padding: 13px 15px;
  color: #8c8c8c;
  font-size: 14px;
  font-weight: 300;
  text-transform: uppercase;
  text-align: center;
  border-bottom: 3px solid transparent;
}

.nav-items>a>span:hover {
  color: #212121;
  text-stroke: 1px black;
-webkit-text-stroke: 1px black;
  border-bottom: 3px solid #212121;
}

.nav-search>img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

<nav>
  <a href="#" class="nav-logo">
    <img src="https://pngicon.ru/file/uploads/google.png" alt="logo">
  </a>
  <div class="nav-items">
    <a href=""><span title="Home">Home</span></a>
    <a href=""><span title="Categories">Categories</span></a>
    <a href=""><span title="My">My</span></a>
    <a href=""><span title="Economics">Economics</span></a>
    <a href=""><span title="Eco">Eco</span></a>
    <a href="" class="nav-search">
      <img src="https://www.seonews.ru/upload/iblock/fdd/fdd6bc9a7bfe9b5094c929fed2b447d2.png" alt="Search">
    </a>
  </div>
</nav>

Answer 2

Изменение размера шрифта, в вашем случае, несёт чисто визуально-оформительскую нагрузку (в отличие, например, от тега <strong>), поэтому предлагается использовать возможности CSS чуть шире, и text-shadow будет оптимальным решением:

.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: 13px 15px;
  text-align: center;
}

.menu-link:hover {
  color: #212121;
  border-bottom: 3px solid #212121;
  text-shadow: .6px 0px 0px #212121, -.6px 0px 0px #212121;
}

<a href="#"><img src="img/logo.svg" alt="logo"></a>
<ul class="menu clearfix ">
  <li class="menu-list"><a href="#" class="menu-link menu-link-active">HOME</a></li>
  <li class="menu-list"><a href="#" class="menu-link">PRODUCTS</a></li>
  <li class="menu-list"><a href="#" class="menu-link">HISTORY</a></li>
  <li class="menu-list"><a href="#" class="menu-link">SHOWROOM</a></li>
  <li class="menu-list"><a href="#" class="menu-link">CONTACT</a></li>
  <li class="menu-list">
    <a href="#" class=""><img src="img/search.svg" alt="search"></a>
  </li>
</ul>

Answer 3

.menu-link {
  color: #8c8c8c;
  font-size: 14px;
  font-weight: 300;
  text-transform: uppercase;
  text-decoration: none;
  padding: 13px 15px;
  text-align: center;
}

.menu-link:hover {
  padding: 13px 15px;
  color: #212121;
  border-bottom: 3px solid #212121;
  text-shadow: .6px 0px 0px #212121, -.6px 0px 0px #212121;
}

БЛОГ НА HUSL

Неправильное поведение текста при наведении курсора на элемент меню

Ответы (3 шт):