Abbassare il testo in un menù

[MadBob]

Ho realizzato un menù a rollover da una list, con il codice sotto riportato.
Il mio problema è che il testo rimane abbastanza alto e non centrato a metà del pulsante.
Come faccio a spostare solo il testo senza muovere l'immagine sotto ?
Vorrei spostarlo un pò più in basso nello stato normale e ancora più in basso nel rollover simulando il movimento.

#menu ul{
padding-left: 0;
margin-left: 0;
background-color: #333;
color: White;
float: left;
width: 100%;
font-family: arial, helvetica, sans-serif;
}

#menu ul li { 
    display: inline;
}
#menu ul li a
{
    float: left;height: 35px;padding-left: 18px;
    font: bold 16px arial, helvetica, sans-serif;
    background: url(../img/bottone.png) no-repeat top left;
    text-decoration: none;color: #FFCC00;
}
#menu ul li span{
    display: block;
    height:35px;
    padding-right: 18px;
    background: url(../img/bottone.png) no-repeat top right
}
#menu ul li a:hover
{
background-position: bottom left;
color: #FFF;
line-height:20px;
}    
#menu ul li a:hover span{
background-position: bottom right;
line-height:20px;
} 

un esempio lo trovate all'indirizzo : http://www.gestionesito.com/test/

grazie
- Kiko -