Firefox interpretiert CSS-Style micht vollständig

[Marcel]

Ich habs jetzt mal so gemacht:

<style type="text/css">
.menu:hover {
background:#dddddd;
}
.menu:active {
background:#cccccc;
}
.menu {
        font-weight:bold;
color:#000000;
text-decoration:none;
background:#efefef;
width: 120px;
}
</style>

<ul>
<li class="menu"><a class="menu" href="javascript:musik()">Musik!</a></li>
<li class="menu"><a class="menu" href="mitglieder.php?sektion=mitglieder">Mitglieder</a></li>
<li><div style="background:#efefef; width: 100px;height:16;"> </div></li>
<li><div style="background:#efefef; width: 90px;height:16;"> </div></li>
<li><div style="background:#efefef; width: 70px;height:16;"> </div></li>
<li><div style="background:#efefef; width: 40px;height:16;"> </div></li>
<li><div style="background:#efefef; width: 10px;height:16;"> </div></li>
</ul>

Das sieht schon viel besser im Firefox aus.
Es wird aber Leider der Hovereffekt nur auf den link ausgeführt, so dass nun immer der Überstehende Teil in der Farbe unverändert bleibt.
Wie könnte ich das bitte ändern?

Und schonmal danke an alle Helfer!