30

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.

4
  • 1
    This is a very interesting snippet - I've explained the issue in my answer, but in short, it's basically because of the built in display property of the a tag coupled with some default styling in the chrome browser. Well spotted. And +1 for a very well written question.
    – Frits
    Apr 10, 2017 at 14:45
  • 1
    My upvote to a very nice question Apr 10, 2017 at 14:53
  • 1
    Both works fine here in Chrome 57 and Opera 44 on macOS. Did the examples change or is this an issue with older Chrome versions? Apr 14, 2017 at 17:40
  • @OptimusCrime I can still replicate the issue on my Chrome - if you'd like some clarification, on the second example, there's a single line (1px width) in between the two a tags that shoudn't be there. The a tags need to be directly next to each other.
    – Frits
    Apr 15, 2017 at 20:43

3 Answers 3

28

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;
}
3
  • That's not a bug, is the expected and desired result. Inline elements works as this. Don't say that's a bug because is not. Apr 10, 2017 at 14:52
  • 1
    Hi @MarcosPérezGude - Thanks for the feedback :) I didn't mention anything about it being a bug - not sure where the confusion is from, because I agree that it's not a bug? Hence my explanation of the default styling...
    – Frits
    Apr 10, 2017 at 14:54
  • 1
    Oh my God! Sorry for my misunderstood. I read You can fix this bug... and your write You can fix this by..., so much sorry for the confusion. I need to come back to reading lessons on the school. Maybe that my native language is not english... :( Apr 10, 2017 at 14:56
8

Add display: block to the links. The link is smaller than the li

-5

Remove the font-size and line-height from the menu-item, style the link directly. This behaviour most likely comes from rounding errors.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.