Menu poziome

[cyfran]

Witam,

Chcę uzyskać taki efekt:


Tak wygląda kod html:

Kod:

<div class="menu">
<ul>
<li><a href="strefatv.php"><span>Strefa - TV</span></a></li>
<li><a href="strefafm"><span>Strefa FM Group</span></a></li>
<li><a href="forum.php"><span>Forum Strefy Sukcesu</span></a></li>
<li><a href="kontakt.php"><span>Kontakt</span></a></li>
  </ul>
</div>

Taki jest kod CSS:

Kod:

.menu { width: 960px; height: 35px; background: url(images/menu_gora.png) no-repeat top;  }
.menu li a:hover { text-decoration: none; }
.menu li {  display: inline; }
.menu li a span { height: 25px; width: 168px; background: url(images/menu_przycisk.png) no-repeat left top; color: gray;  }

I dostaję coś takiego:


Czyli tło dla przycisku jest tylko wyświetlane częściowo - tyle ile zajmuje tekst - pomimo wartości width:168px oraz height: 25px.

Jak sprawić, żeby całe tło dla przycisku się wyświetlało, a tekst był na jego środku?