cruisi: problem mit kombination von BG-img und BG-color bei menüpunkten

Beitrag lesen

hallo,

ich habe ein problem mit meinem menü und hoffe, daß mir jemand von euch den entscheidenden tipp gegen kann, was ich falsch mache.

1. die listenpunkte (menüeinträge) haben bei mouse-over eine andere bg-color und color.
das habe ich bereits.
2. damit der menüpunkt, auf dessen seite man sich momentan befindet, dann fest die oben genannten eigenschaften hat, habe ich ihm eine id gegeben und die formatierung so fest zugewiesen. klappt auch.
3. jetzt sollen aber einige menüpunkte unterschiedliche background-images bekommen (müssen sich bei mouse-over nicht ändern). das mache ich halt auch mit id's. nur wenn ich (bisher ist es nur einer) einem menüpunkt per id einen background zuweise, funktioniert die background-color bei mouse-over nicht mehr. die schriftfarbe hingegen verhält sich bei mouse-over noch korrekt.
4. und wenn das problem gelöst wäre, käme noch ein weiteres. wie vereine ich punkte 2 (s.o.) mit dem background-image?

ich hoffe, es war einigermassen verständlich. hier kommt noch der code dazu und ein screenshot, wie das menü aussehen soll.

wenn ihr die url hier oben anklickt, gelangt ihr zu der ansicht, wie das menü mal aussehen soll.

viele grüße und vielen dank im voraus für jeden tipp,
cruisi

<div class="ordermenue">
<span class="ordermenue_headline">
Order
</span>
<ul>
<li>
<a href="#" id="aktiv3">Button 1</a></li>
<li>
<a href="#">Button 2</a></li>
<li>
<a href="#">Button 3</a></li>
<li>
<a href="#">Button 4</a></li>
<li>
<a href="#" id="frage">Button 5</a></li>
</ul>
</div>

a#frage {
background:url(../img/ordermenue_frage.gif) no-repeat;
background-position: bottom right;
}
a#aktiv3 {
background-color: #AB565D;
color: #fff;
}
.ordermenue {
margin: 0;
}
.ordermenue ul {
list-style-type: none;
color: #AB565D;
text-align: left;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, Lucida;
background-color: #C99089;
padding:26px 0 2px 0;
}
.ordermenue ul li {
display: inline-block;
color:#ffffff;
font-size: 11px;
line-height:1.45em;
}
.ordermenue ul li a {
text-decoration: none;
background-color: #C99089;
color: #AB565D;
padding: 1px 0 1px 10px;
display: block;
}
.ordermenue ul li a:hover {
background-color: #AB565D;
color: #fff;
}
.ordermenue_headline {
position: absolute;
left: 10px;
font-weight: bold;
font-family: Verdana, Arial;
color:#ffffff;
font-size: 13px;
background-color:#7D262C;
padding:5px 0 5px 10px;
width:174px;
}