Наведение зависит от размера шрифта в Chrome

Что я пытаюсь...

Я пытаюсь создать меню с эффектом зависания. Если вы наведете ссылку, цвет фона должен измениться. Если вы перейдете к следующему, он должен плавно перейти к следующей ссылке.

Проблема

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

Рабочий пример

.menu-item {
  list-style: none;
  float: left;
  text-transform: uppercase;
  font-size: 21px;
  line-height: 30px;
}

a {
  padding: 20px;
}

a:hover {
  background-color: green;
}

<div id="menu">
  <ul class="menu-list">
    <li class="menu-item"><a href='#'>Menü #1</a></li>
    <li class="menu-item"><a href='#'>Menü #2</a></li>
    <li class="menu-item"><a href='#'>Menü #3</a></li>
  </ul>
</div>

Ответ 1

Это действительно интересный вопрос. "Проблема" вызвана браузером CSS, который читает тег display:inline; тега a и не заполняет его весь тег display:block; тега li.

Вы можете исправить это, используя следующее правило CSS

.menu-item a {
    display:block;
}

Ответ 2

Добавьте display: block к ссылкам. Ссылка меньше, чем li

Ответ 3

Удалите размер шрифта и высоту строки из элемента меню, напрямую соедините ссылку. Такое поведение, скорее всего, связано с ошибками округления.