Problem s ruznym zobrazovanim css ve firefoxu a v ie

Ahoj lidi,
mam jeden problem se kterym si uz dlouho lamu hlavu a snad mi nekdo z vas dokaze poradit. Delam si na strankach vertikalni menu pomoci kaskadovych stylu. Klicovej usek vypada takhle:

<ul class="mainmenu">
<li class="mainmenu" id="m10">
<a href="#" class="mainmenu" >Link jedna</a>
</li>
<li class="mainmenu" id="m20">
<a href="#" class="mainmenu" >Link dva</a>
</li>
<li class="mainmenu" id="m30">
<a href="#" class="mainmenu" >Link tri</a>
</li>
<li class="mainmenu" id="m40">
<a href="#" class="mainmenu" >Link ctyri</a>
</li>
</ul>

Pozadi elementu li mam nastaveny na sedivou barvu,pozadi elementu odkazu je nastaveny na zadny. Pri najeti mysi na odkaz chci zmenit barvu pozadi na cervenou, ale nejde (opravte me jestli to jde) zmenit barvu pozadi elementu li, ale pozadi elementu odkazu. Aby to vypadalo,jako ze menim pozadi elementu li, chtel jsem element odkazu roztahnout pres celej element li pomoci stributu width. Potiz je v tom, ze to funguje bezvadne v IE6,ale ve firefoxu ani tuk:( Nemate nekdo nejakej figl,ja by se to dalo udelat?Je to chyba moje,nebo spatna podpora standar ze strany FF,nebo IE6. Jeste tu uvedu pouzity CSS:

ul.mainmenu
{
list-style-type:none;
padding:0;
margin:20;
font-weight: bolder;
font-family: arial, "lucida console", sans-serif
}

li.mainmenu
{
background-color:gray;
border-bottom:2px solid white;
}

a.mainmenu
{
width: 100%;
padding:0em 0.6em;
text-decoration:none;
color:white;
}


a.mainmenu:hover
{
width: 100%;
text-decoration:none;
color:yellow;
background: red;
}

Kdyztak se muzete mrknout na http://mek.wz.cz/pokus.html,netusim,proc mi to neslape:(
Diky za pomoc,mejte se...