---
title: "Aufklappmenu mit unterschiedlichen CSS (Top- und Submenu)"
url: "https://www.typo3.net/d/70965-aufklappmenu-mit-unterschiedlichen-css-top-und-submenu"
source: "typo3.net"
tags: ["TYPO3","Menüs","Frage"]
created: "2007-11-27"
last_reply: "2007-11-28"
replies: 7
solved: false
page: 1
pages: 1
lang: "de"
---

# Aufklappmenu mit unterschiedlichen CSS (Top- und Submenu)

TYPO3 › Menüs · 7 Antworten · gestartet 2007-11-27

## Eröffnungsbeitrag

**molekuel** · 2007-11-27 · [Beitrag #1](https://www.typo3.net/d/70965-aufklappmenu-mit-unterschiedlichen-css-top-und-submenu/1)

Hi Leute,
steh grad ein wenig aufm Schlauch... Folgendes Szenarion:

Hab ein Aufklappmenu, in dem jeder Topmenu-Punkt eine andere Klasse kriegt (klappt bestens soweit). Jetzt sollten aber die Submenu-Punkte der des jeweiligen Topmenus wiederum eigene Klassen erhalten, und da komm ich grad nicht weiter.

zB
Topmenu 1 -> Blau
  Submenu 1_1 -> hellblau
  Submenu 1_2 -> hellblau
  Submenu 1_3 -> hellblau
Topmenu 2 -> Grün
  Submenu 2_1 -> hellgrün
  Submenu 2_2 -> hellgrün
  Submenu 2_3 -> hellgrün
etc

Also immer die zusammengehörigen Submenus dieselbe Klasse bzw ID.

Wie mach ich das am besten? Wäre froh wenn mir da jemand kurz nen Denkanstoss geben könnte.
Vielen Dank schon mal,
Manuel

Hier mal mein bisheriges Typoscript:

```typoscript
### Menü ###
lib.mainMenu = HMENU

## GANZES MENU MIT ENTSPRECHENDER LISTEN-DEFINITION WRAPPEN
lib.mainMenu.wrap = <ul id="menu" class="main_menu"><dl>|</dl></ul>

lib.mainMenu {

  ### Erste Ebene -> KLAPPT BESTENS ###
    1 = TMENU
    1 {

      NO {
        beforeWrap = <dt id="first">| || <dt id="second">| || <dt id="third">| ||<dt id="fourth">|
        linkWrap = |
        wrapItemAndSub = |</dt> || |</dt> || |</dt> || |</dt>
      }

      ACT > .NO
      ACT = 1
      ACT {
        beforeWrap = <dt id="first">| || <dt id="second">| || <dt id="third">| ||<dt id="fourth">|
        # ATagParams = class='active'
        wrapItemAndSub = |</dt> || |</dt> || |</dt> || |</dt>
      }
    }

   ####################################################
    ### Zweite Ebene -> Klappt noch nicht... ###

    ### ALSO hier müsste ich jeweils eine einzelne ID mitgeben, analog zum Topmenu ###

    2 = TMENU
    
    2 {
      entryLevel = 1
      wrap = <dd><ul class="sub_menu">|</ul></dd>

      NO {
        beforeWrap = <li id="first_sub">| || <li id="second_sub">| || <li id="third_sub">| ||<li id="fourth_sub">|
        linkWrap = |
        wrapItemAndSub = |</li> || |</li> || |</li> || |</li >
      }

      ACT > .NO
      ACT = 1
      ACT {
        beforeWrap = <li id="first_sub">| || <li id="second_sub">| || <li id="third_sub">| ||<li id="fourth_sub">|
        ATagParams = class='active'
        wrapItemAndSub = |</li> || |</li> || |</li> || |</li >
      }
      
    }
}

## Menu [End]
```

## Antworten

### [#2](https://www.typo3.net/d/70965-aufklappmenu-mit-unterschiedlichen-css-top-und-submenu/2) · Unbekannter Benutzer · 2007-11-27

Brauchst du denn für jeden Submenüpunkt wirklich eine eigene Klasse oder müssen nur wie in deinem Beispiel alle submenüpunkte von blau gleich ansprechbar sein?

### [#3](https://www.typo3.net/d/70965-aufklappmenu-mit-unterschiedlichen-css-top-und-submenu/3) · molekuel · 2007-11-27

HI Kitsunet,
ja natürlich, alle Submenus von Blau brauchen die gleiche Klasse  bzw ID. Also:

<dt id="first"><a href="#">Eltern</a></dt>
<dd><ul class="sub_menu">
<li **id="first_sub"**><a href="#">sub 1</a></li>
<li **id="first_sub"**><a href="#">sub 2</a></li>
</ul></dd>

### [#4](https://www.typo3.net/d/70965-aufklappmenu-mit-unterschiedlichen-css-top-und-submenu/4) · Unbekannter Benutzer · 2007-11-27

ja moment, eine ID muss einmalig sein, d.h. die dürften dann nur die gleich class bekommen, dass wiederum ist aber ja auch nicht nötig, denn z.b. mit:

#first li{

}

im CSS kannst du alle li innerhalb von #first stylen, d.h. alle Unterpunkte vom ersten Hauptpunkt...

### [#5](https://www.typo3.net/d/70965-aufklappmenu-mit-unterschiedlichen-css-top-und-submenu/5) · molekuel · 2007-11-28

hmm, wenn ich das Topmenu so anspreche:

```html
ul#menu  dt#first a {
```

wie muss ich dann das Untermenu ansprechen? So setze ich die Klasse:

```html
ul#menu ul ul li.first_sub a {
```

Krieg das grad nicht auf die Reihe... Wäre froh wenn mir da jemand kurz nen tipp geben könnte!
Gruss und danke,
manuel

### [#6](https://www.typo3.net/d/70965-aufklappmenu-mit-unterschiedlichen-css-top-und-submenu/6) · molekuel · 2007-11-28

scheint, als ob ich mit dem spezifischen CSS problem nicht weiterkomme...

Andere Frage:
ist es mit TypoScript möglich jedem Submenu-Block eine eigene Klasse mitzugeben? Also:

```html
<dd><ul class="sub_menu">
<li class="first_sub"><a href="#">sub 1</a></li>
<li class ="first_sub"><a href="#">sub 2</a></li>
</ul></dd>
```

bzw.

```html
<dd><ul class="sub_menu">
<li class="second_sub"><a href="#">sub 1</a></li>
<li class ="second_sub"><a href="#">sub 2</a></li>
</ul></dd>
```

Wäre extrem dankbar, wenn  mir da jemand einen tipp geben könnte.
gruss, m

### [#7](https://www.typo3.net/d/70965-aufklappmenu-mit-unterschiedlichen-css-top-und-submenu/7) · Unbekannter Benutzer · 2007-11-28

na wenn du dein Topmenü so ansprichst:

```html
ul#menu  dt#first a {
```

dann das entsprechende Submenü über:

```html
ul#menu  dt#first li a {
```

### [#8](https://www.typo3.net/d/70965-aufklappmenu-mit-unterschiedlichen-css-top-und-submenu/8) · molekuel · 2007-11-28

mensch! ich sah den wald vor lauter bäumen nicht mehr, bzw sah typo3 vor lauter css nicht mehr...

ja natürlich klappt das so! hab nicht mit dem richtige parsen von typo3 gerechnet....

Vielen Dank für die gedult!
manuel

---

Quelle: „Aufklappmenu mit unterschiedlichen CSS (Top- und Submenu)“, typo3.net, https://www.typo3.net/d/70965-aufklappmenu-mit-unterschiedlichen-css-top-und-submenu
Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.