li:hover grows in width inside floating wrapper

Question

I've found a confusing thing (only happens with Safari and Chrome). First of all the fiddle: http://jsfiddle.net/k8ypwqbd/

<ul>
    <li>Item 1</li>
    <li>Item 2 Item 2</li>
</ul>

ul {
    float: left;
    color: red;
    border: 1px solid black;
}
ul li:hover {
    background-color: green;
}

So if you hover the first li-element, nothing happens (except the green background-color). If you hover the second li-element (the widest element) the list grows in width for (in my opinion) no reason. And it stays in that width for the rest of all time.

I have no idea why it happens. Is it a bug?

Here is a screenshot:

enter image description here

I have tested your fiddle and both li work the same (change the background to green on hover) could you share a screenshot with the problem? — emmanuel, Aug 28 '14 at 08:02
Safari 7.0.6 and Chrome 37. A screenshot is added to the question-post. — Fabic, Aug 28 '14 at 08:18

score 0 · Answer 1 · answered Aug 28 '14 at 07:56

0

My workaround so far is to give the floating element a fixed width.

ul {
    float: left;
    color: red;
    border: 1px solid black;
    width: 150px;
}

Is there another solution for dynamic widths?

answered Aug 28 '14 at 07:56

Fabic

498
1
4
17

li:hover grows in width inside floating wrapper

1 Answers1