Question

I’m creating simple horizontal menu. When I hover item it changes background color, but lefts some strange 3px space on left side of the link, and I cannot identify why it shows up, and how to remove it.

Menu is here: http://pokerzysta.site44.com/ (Linki, Posty, Forum, Dodaj)
Any idea what’s wrong with it?

Answer 1

Thats because you’re displaying the list in a horizontal manner with display: inline-block;.
What is rendered there are white spaces from your HTML markup (most likely line-breaks after the li-tags).

If you put the li-tags in your html without white-space and line-breaks this won’t happen:

<ul id="main-menu" class="horizontal-list fleft">
    <li><a href="#">Linki</a></li><li><a href="#">Posty</a></li><li><a href="#">Forum</a></li><li><a href="#">Dodaj</a><li>
</ul>

@cimmanon pointed to a great article by Chris Coyier about displaying list navigations horizontally: http://css-tricks.com/fighting-the-space-between-inline-block-elements/