---
title: "Menü mit mehreren Farben"
url: "https://www.typo3.net/d/105508-menue-mit-mehreren-farben"
source: "typo3.net"
tags: ["TYPO3","Menüs","Frage","HTML & CSS"]
created: "2011-05-22"
last_reply: "2011-05-22"
replies: 0
solved: false
page: 1
pages: 1
lang: "de"
---

# Menü mit mehreren Farben

TYPO3 › Menüs · 0 Antworten · gestartet 2011-05-22

## Eröffnungsbeitrag

**andibey** · 2011-05-22 · [Beitrag #1](https://www.typo3.net/d/105508-menue-mit-mehreren-farben/1)

Hallo,

ich plane ein Menü, indem jeder Menüpunkt eine eigenständige Farbe besitzt, sowie beim hovern per CSS die Subnavi Punkte in exakt der gleichen Farbe wie der Menüpunkt dargestellt werden sollen.

Derzeit sieht es wie auf dem Bild aus.

ich hätte es gerne so, dass der Punkt Aktuelles in Grün ist, und der Link, sowie die CSS Subnavi nur von "Aktuelles" auch in Grün erscheinen. Leider weiß ich nicht wie ich das angehen soll.

TS vom Menü:

```typoscript
page.10.marks.MENU {


special = list
special.value = 2,4,5,6,7,8,9
1 = TMENU
1 {


wrap = <ul class="menu"> | </ul>
expAll = 1


NO.wrapItemAndSub = <li onmouseover="show(this)" onmouseout="hide(this)"> | </li> 



ACT < .NO

ACT = 1

ACT.ATagParams = class="active"

}





2 < .1
3 < .1
4 < .1
}
lib.container < temp.menu
```

CSS:

```css
ul.menu, ul.menu ul {
	margin-top:3px;
    list-style-type: none;

}



ul.menu a {

    display:block;
	font-size:14px;
    padding: 4px 40px 0px 0px;

   font-weight:normal; 

}



ul.menu ul a {
   padding: 0 10px;
	font-size:12px;
	color: #ffffff;
	text-decoration:none;
}
ul.menu ul a:hover {
	padding: 0 10px;
	font-size:12px;
	color: #ffffff;
	text-decoration:underline;
}



ul.menu li {

    padding:0 30 0 0; 
    margin:0;
    float:left;



}



ul.menu ul {
	margin-top:0px;
    margin-left:0;
	padding: 5px 0 3px 0;

    position: absolute;

    background-color: #ff7f24;
	
	opacity: 0.9;

    border:1px solid #ffffff;

    display:none;

    width:auto;
	
	line-height:2;

}



/* IE-Hack */

*html ul.menu ul {

    min-width:80px;
}





ul.menu ul.hover, ul.menu li.hover ul, ul.menu li:hover ul  {

    display:block;

}



ul.menu ul li {
margin-top:0px;
    float:none;
	background-color: transparent;

}

   ul.menu li.hover ul ul, ul.menu li:hover ul ul {

    display: none;
	width:160px;
    margin-left: 140px; /* Breite eines Listenelements - Überlagerung */
    margin-top: -20px; /* Höhe eines Listenelements */

        }
```

In einem anderen Forum bekam ich den Tip verschiedene Klassen im CSS festzulegen für die Farbmarkierungen, soweit kann ich dem ganzen noch folgen. Was ich allerdings dann nicht mehr weiß ist, wie ich im TS per Befehl die einzelnen Klassen den jeweiligen Seitenmenüpunkten zu ordne.

Ich hoffe hier kann mir jemand weiterhelfen.

[Bild: \[upl-image-preview uuid=7c66e3fd-e350-539b-bda7-6766d653836c url=https://www.typo3.net/assets/files/typo3net/410-Bildschirmfoto-2011-05-22-um-14.43.31.png alt=Bildschirmfoto-2011-05-22-um-14.43.31.png thumbnail_url=https://www.typo3.net/assets/files/typo3net/410-Bildschirmfoto-2011-05-22-um-14.43.31.png\]](https://www.typo3.net/assets/files/typo3net/410-Bildschirmfoto-2011-05-22-um-14.43.31.png)

---

Quelle: „Menü mit mehreren Farben“, typo3.net, https://www.typo3.net/d/105508-menue-mit-mehreren-farben
Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.