Navigations Untermenü verschiedene Farben

[Papers00]

Hi

habe aus dem Netz folgende Navi.
Directupload.net - Ddvxapr5e.png

Hab die auch etwas umgebaut.
Jetzt mein kleines Problemchen, womit Ihr mir etwas helfen müsst :-)

Ich habe jetzt 3 Navigationspunkte.
Die Buttons hab je eine andere Farbe.

Nun will ich jedem einzelnen Punkt ein eigene Submenü Farbe geben.

Wie bekomme ich das am schnellsten hin ohne für jeden Navipunkt die komplette CSS für die Navi zu kopieren und anderes zu benennen?

Gibt es irgendwie eine schnellere Möglichkeit die einzelnen li einzeln anzusprechen??

Ich hoffe ihr habt meine Frage verstanden ;-(
Hier der Code

Gruß Papers

Html Teil:

<div class="PrimaryNavigation" style="margin-top:30px;">

<ul>

<li>
<a href="unternehmenskunden/index.phtml">
<img width="70" height="30" class="normal" src="http://#.de/img/01_Navi.png" />
<img width="70" height="30" class="hover" src="http://#.de/img/01_Navi_rollover.png" />
</a>
</li>


<li>
<a href="privatkunden/index.phtml">
<img width="126" height="30"  class="normal" src="http://#.de/img/02_Navi.png" />
<img width="126" height="30"  class="hover" src="http://#.de/img/02_Navi_rollover.png" /></a>
<ul>
<li>
<a href="#">Firmenprofil</a></li>
<li><a href="#">Geschäftsmodelle</a></li>
<li><a href="#">System</a></li>
<li><a href="#">Einkauf</a></li>
<li><a href="#">Exklusivvertrieb</a></li>
</ul> 
</li>

<li><a href="private-banking/index.phtml">
<img width="144" height="30"  class="normal" src="http://#.de/img/03_Navi.png" />
<img width="144" height="30"  class="hover" src="http://#.de/img/03_Navi_rollover.png" /></a>
<ul>
<li>
<a href="#">Immobilien</a></li>
<li><a href="#">Initiative</a></li>
</ul> 
</li>

</ul> 
</div>

CSS Teil:

.PrimaryNavigation {
	float: left;
	width: 800px;
	height:30px; 
	margin-bottom:17px;
	
	
}

.PrimaryNavigation ul {
	
	margin-right: 0px;
	display:inline;
}

.PrimaryNavigation ul li {
	float: left;
	display: block;
	margin-left: 0px;
	padding-bottom: 9px;
	position: relative;
}

.PrimaryNavigation ul li a {
	float: left;
	display: block;
	padding:2px 0 0 0;
	color: #004a7f;
	font-size: 16px;
	line-height: 24px;
	height:36px;
	background-color: #ffffff;
	font-family: 'CompatilLetterLTCom-Bd';
/* 	x-render: true; */
/* 	x-rule: true; */
	position: relative;
}

.PrimaryNavigation ul li a img {
	border:none;
}

.PrimaryNavigation ul li:hover a,
.PrimaryNavigation ul li.hover a,
.PrimaryNavigation ul li.selected a {
	font-family: 'CompatilLetterLTCom-Bd';
/* 	x-render: true; */
/* 	x-rule: true; */
	background-color:#ffffff;
	background-position: 0 bottom;
	background-repeat: repeat-x;
}

.PrimaryNavigation ul li:hover a,
.PrimaryNavigation ul li.hover a {
	background-image: url(http://#.de/img/main-navi-hover.gif);
}

.PrimaryNavigation ul li.selected a {
	background-image: url(http://#.de/img/navihover.gif);
}

.PrimaryNavigation ul li a img.normal {
	border: none;
	display: block;
}

.PrimaryNavigation ul li a img.hover {
	border: none;
	display: none;
}

.PrimaryNavigation ul li a:hover img.hover {
	display:block;
}

.PrimaryNavigation ul li a:hover img.normal {
	display:none;
}

.PrimaryNavigation ul ul { 
	display:none; 
	padding: 13px 0;
	margin: 0;
	list-style:none; 
	position:absolute;
	top:38px;
	background-color:#fff; /* ----- das müsste für jeden Navi Punkt in eine andere Farbe geändert werden ----- */
	border: 1px solid #afafaf;
	width: auto;
	left:0;
}

.PrimaryNavigation ul #PrimaryNavigationLast ul { 
	left:auto;
	right:0;
}

.PrimaryNavigation ul #PrimaryNavigationLast ul { 
	right:0;
}

.PrimaryNavigation ul li:hover ul,
.PrimaryNavigation ul li.hover ul {
	display: block;
}

.PrimaryNavigation ul ul li { 
	float: none;
	margin:0; 
	padding:0
}

.PrimaryNavigation ul ul li a,
.PrimaryNavigation ul li:hover ul li a,
.PrimaryNavigation ul li.hover ul li a {
	float:none;
	height:auto;
	display:block;
	padding:3px 10px 3px 20px;
	text-decoration: none;
	background-color: #fff; /* ----- das müsste für jeden Navi Punkt in eine andere Farbe geändert werden ----- */
	font-size:12px; 
	line-height:16px;
	background-image:none;
	font-family: Arial, sans-serif;
	color: #grey;
	width: 158px;
	font-weight: bold;
}

.PrimaryNavigation li ul li a:hover,
.PrimaryNavigation li:hover ul li a:hover { 
	background-color: #dce6ef;
	background-image: none;
}

 

[mermshaus]

Setze den li-Elementen, deren Farbe du ändern möchtest, eine zusätzliche CSS-Klasse, über die du die entsprechenden Regeln hinzufügst.

<li class="itemProducts">…

.itemProducts { background: red; }

 

[Papers00]

Hi ich hab das mal gemacht nur tut sich nix...
Ich bin echt am verzweifeln ;-(

Die Css ist auch total kompliziert :-)

So habe ich es hibeommen in dem ich alles direkt rein schreibe.
Aber dann funktioniert der hover effekt nicht mehr.
An der css von oben habe ich nix verändert.

<li>
<a href="privatkunden/index.phtml">
<img width="126" height="30"  class="normal" src="http://#.de/img/02_Navi.png" />
<img width="126" height="30"  class="hover" src="http://#.de/img/02_Navi_rollover.png" /></a>
<ul style="background-color:red;">
<li>
<a href="privatkunden/Aktuelles_mehrere_Aktionen/index.phtml" style="background-color:red;">Firmenprofil</a></li>
<li><a href="privatkunden/gute-gruende/index.phtml" style="background-color:red;">Geschäftsmodelle</a></li>
<li><a href="privatkunden/konten-karten/index.phtml" style="background-color:red;">System</a></li>
<li><a href="privatkunden/sparen-anlegen/index.phtml" style="background-color:red;">Einkauf</a></li>
<li><a href="privatkunden/kredite/index.phtml" style="background-color:red;">Exklusivvertrieb</a></li>
</ul> 
</li>

Danke für eure Hilfe