Question

As the topic said. I want the hovered one to change his width. But it appears that every list element changes his width.

Fiddle

Its seems easy, but i dont get it. Any suggestions?

Edit: When u change the width at #nav li a:hover { to background-color: #555;
It works fine. Really confused now.

Answer 1

It doesn’t affect other elements, it just moves them. See this.

---

Solution: Add margin-left: -30px;. That will fix other elements.
Why 30px? 30px is the difference between old and new width (90 and 120px).

#nav li a:hover {
    width: 120px;
    margin-left: -30px;
}

Live demo: jsFiddle