Problema con :hover

[Sampei89]

Ragazzi questo è il risultato che ho: www.sampeidesign.altervista.org
Quando si passa con il mouse su Home, l'immagine sovrapposta compare in modo corretto ma la scritta Home si sposta, sapete come posso risolvere?
Per semplicità vi incollo quì il codice Html e Css:

Html

<div class="menu">
 <ul class="navigation">[*]<span>Home</span> [/list]
</div>

Css:

.menu {position: relative;
       background-repeat: no-repeat;
       width: 793px; 
       height: 100px;
       background-image: url(immagini/menu.png);
       margin-left: auto;
       margin-right: auto;}

ul.navigation li {list-style-type: none;}

ul.navigation li a {font-family: Arial;
                    text-decoration: none;
                    font-size: 20px;
                    color: #E1E1E1;
                    margin-left: 15px;
                    margin-top: 10px;
                    float: left;
                    display: block;}

li a.home:hover {color: #EDEDED;
                 width: 183px;
                 height: 82px;
                 margin-top: 3px;
                 margin-left: -31px;
                 background: url(immagini/home.png) no-repeat;}

Attendo dei vostri suggerimenti grazie!!

[Mas245]

a me non si sposta niente ma ho firefox 3.0

[Sampei89]

Si infatti ora ho risolto...