Почему дергается элемент при наведении?

Question

Почему при наведении на элемент меню, он дергается?

<nav class="menu">
          <ul>
              <li><a href="#">Главная</a>
                <ul class="sub_menu">
                  <li><a href="#">Брендинг</a></li>
                  <li><a href="#">Вэб-разработка</a></li>
                  <li><a href="#">Медиа-маркетинг</a></li>
                  <li><a href="#">Комплексное<br>продвижение</a></li>
                </ul>
              </li>
              <li><a href="#">О нас</a></li>
              <li><a href="#">Услуги</a>
              <li><a href="#">Порядок работы</a></li>
              <li><a href="#">Этапы работы</a></li>
              <li><a href="#">Портфолио</a></li>
              <li><a href="#">Новости</a></li>
              <li ><a href="#">Конакты</a></li>
          </ul>
        </nav>

menu > ul  {
    display: flex !important;
}

.menu ul li {
    margin-right: 40px;
    font-size: 16px;

}

.menu ul li:last-child {
    margin-right: 0 !important;
}


.menu ul li:hover {
    font-weight: bold;
    transition: 0.3s linear;
}

.menu ul li:hover .sub_menu{
    visibility: visible;
    opacity: 1;
}

.sub_menu {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, 0.44);
    padding: 15px;
    background-color: rgba(0,0,0,0.5);
    visibility: hidden;
      opacity: 0;
      transition: visibility ease 0.3s, opacity ease 0.3s;
}

.sub_menu li {
    margin-bottom: 16px;
    font-size: 15px;
}


.sub_menu li:last-child {
    margin-bottom: 0;
}

<nav class="menu">
          <ul>
              <li><a href="#">Главная</a>
                <ul class="sub_menu">
                  <li><a href="#">Брендинг</a></li>
                  <li><a href="#">Вэб-разработка</a></li>
                  <li><a href="#">Медиа-маркетинг</a></li>
                  <li><a href="#">Комплексное<br>продвижение</a></li>
                </ul>
              </li>
              <li><a href="#">О нас</a></li>
              <li><a href="#">Услуги</a>
              <li><a href="#">Порядок работы</a></li>
              <li><a href="#">Этапы работы</a></li>
              <li><a href="#">Портфолио</a></li>
              <li><a href="#">Новости</a></li>
              <li ><a href="#">Конакты</a></li>
          </ul>
        </nav>

весь код jsfiddle.net/92x7pqa3/

Сам сайт tempesv0.beget.tech

Answer 1

в стиле на строке 281 применяется font-weight: bold; что увеличивает размер текста на несколько пикселей и приводит к тому что с остальным текстом за ним происходит смещение. Если вы хотите предотвратить такое поведение лучше задать блокам с текстом фиксированную ширину, или убрать это свойство

Дергается

.menu ul li:hover {
    font-weight: bold;
    transition: 0.3s linear !important;
}

Не дергается

.menu ul li:hover {
    /*font-weight: bold;*/
    transition: 0.3s linear !important;
}

для того что б исправить данную ситуацию советую добавить кастомный атрибут title что будет копировать текст вкладки например было <a href="#">Главная</a> стало <a href="#" title="Главная">Главная</a>

<nav class="menu">
  <ul>
      <li><a href="#" title="Главная">Главная</a>
        <ul class="sub_menu">
          <li><a href="#">Брендинг</a></li>
          <li><a href="#">Вэб-разработка</a></li>
          <li><a href="#">Медиа-маркетинг</a></li>
          <li><a href="#">Комплексное<br>продвижение</a></li>
        </ul>
      </li>
      <li><a href="#" title="О нас">О нас</a></li>
      <li><a href="#" title="Услуги">Услуги</a>
      <li><a href="#" title="Порядок работы">Порядок работы</a></li>
      <li><a href="#" title="Этапы работы">Этапы работы</a></li>
      <li><a href="#" title="Портфолио">Портфолио</a></li>
      <li><a href="#" title="Новости">Новости</a></li>
      <li ><a href="#" title="Конакты">Конакты</a></li>
  </ul>
</nav>

советую убрать из кода данную строчку потому что она больше не нужна и transition ничего не делает

.menu ul li:hover {
        font-weight: bold;
        transition: 0.3s linear !important;
 }

после добавьте к стилям эти строки

.menu li a:hover {
  font-weight:bold;
}
.menu li a::after {
    display: block;
    content: attr(title);
    font-weight: bold;
    overflow: hidden;
    visibility: hidden;
    height: 0;
}

и все должно заработать как ожидается

БЛОГ НА HUSL

Почему дергается элемент при наведении?

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