Hover depends on font-size in Chrome

Question

What I'm trying...

I'm trying to make a menu with a hover effect. If you hover a link, it's background-color should change. If you go to the next one, it should change smoothly to the next link.

---

Problem

When you hover over one link and then go to the next one, there is a small gap between the elements. If your mouse is at that exact spot, nothing happens.

---

Working Example

.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>

---

Not Working Example

.menu-item {    list-style: none;    float: left;    text-transform: uppercase;    font-size: 20px;    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>

My observation

If you change the font-size just by one pixel, it works. If I use IE it works in both examples, but in Chrome only the Working One works :D

---

What I'm asking for...

Is this a Chrome bug or is there a possibility to make the 'not working one' work.

Answer 1

It's actually an interesting question. The "issue" is caused by the browser CSS that is reading the display:inline; of the a tag, and not having it fill the entire display:block; of the li tag.

You can fix this by using the following CSS rule

.menu-item a {     display:block; }