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.
a
tag coupled with some default styling in the chrome browser. Well spotted. And +1 for a very well written question.a
tags that shoudn't be there. Thea
tags need to be directly next to each other.