Наведение зависит от размера шрифта в 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>

Ответы

.menu-item a {
    display:block;
}