horizontale css rollover menu mit grafikbutton

[mook]

Hallo!

Ich möchte eine Rollover Menü (horizontal) erstellen mit gif Bildern als Elemente. Leider klappt das nicht ganz...
Kann mir jemand helfen?
Mein Code sieht folgendermaßen aus:

<div id="mainmenu">
<ul>
<li><a href="url" id="m1"></a></li>
<li><a href="url" id="m2"></a></li>
<li><a href="url" id="m3"></a></li>
<li><a href="url" id="m4"></a></li>
</ul>
</div>

css:

#mainmenu ul li{
display: inline;
}

a#m1{
display:inline;
background-image: url(images/m1.gif);
width:150px; height:50px
}

a#m1:hover{
background-image: url(images/m1_over.gif);
}

a#m2{
display:inline;
background-image: url(images/m2.gif);
width:150px; height:50px
}

a#m2:hover{
background-image: url(images/m2_over.gif);
}

[usw.]