Problema menu orizzontale con immagini

[wave00]

Ciao a tutti sto cercando di fare un menu orizzontale con pulsanti che aumentano in altezza quando sono attivi, il problema è che anche tutti gli altri pulsanti si spostano.
Potete vedere l'esempio che ho realizzato qui
www.alessianoe.it
L'effetto dovrebbe essere questo:
Effetto movimento
la struttura del mio menu è questa:

<div id="menu">
                <ul>[*]
                    [url="Default.aspx"][/url]
                    [*]
                     [url="Biografia.aspx"][/url]
                    [*]
                     [url="Gallery.aspx"][/url]
                    [*]
                     [url="Contatti.aspx"][/url]
                    [*]
                     [url="Link.aspx"][/url]
                    [/list]
            </div> 

Mentre del codice css è questo:

#menu
{
    position: absolute;
    bottom: 0px;
    right: 190px;
}
#menu li
{
    list-style-type: none;
    float: left;
    margin-right:20px;
}
a{display: block;}
a.home
{
    background-image: url(../img/menu/home.png);
    height: 34px;
    width: 150px;    
}
a.home:hover
{
    background-image: url(../img/menu/home_h.png);
    height: 46px;
    width: 150px;
    cursor: pointer;
} 

Qualche consiglio su cosa sbagli?