---
title: "freecssdropdown mit unterschiedlichen Klassen bei UL"
url: "https://www.typo3.net/d/101242-freecssdropdown-mit-unterschiedlichen-klassen-bei-ul"
source: "typo3.net"
tags: ["TYPO3","Menüs","Frage","HTML & CSS"]
created: "2010-09-15"
last_reply: "2010-09-22"
replies: 2
solved: true
page: 1
pages: 1
lang: "de"
---

# freecssdropdown mit unterschiedlichen Klassen bei UL

TYPO3 › Menüs · 2 Antworten · gelöst · gestartet 2010-09-15

## Frage

**Unbekannter Benutzer** · 2010-09-15 · [Beitrag #1](https://www.typo3.net/d/101242-freecssdropdown-mit-unterschiedlichen-klassen-bei-ul/1)

Hallo,

ich baue gerade ein freecssdropdown-Menü um. Es handelt sich um ein TMENU mit zwei Ebenen welches bei der ersten und zweiten Ebene horizontal angeordnet ist. Ich möchte hierbei immer die zweite Ebene auf der sich die gerade aktive Seite befindet eingeblendet lassen wegen der Usability. Wenn der Mauszeiger aber über einen anderen Menüpunkt der ersten Ebene geht, soll von diesem Menüpunkt die zweite Ebene eingeblendet werden (über der gerade aktiven Ebene). Dazu habe ich einfach verschiedene Klassen vergeben und diese über CSS formatiert. Klappt auch eigentlich...

Einziger Punkt ist, das der z-index aller zweiter Ebenen gleich ist. Sprich jeder Menüpunkt, der im xHTML-Quelltext weiter unten kommt, überdeckt die vorhergehenden Punkte. Dazu müsste ich dem UL-Tag, in welchem die gerade aktive Seite ist eine eigene Klasse mitgeben (damit ich den z-index ändern kann). Leider habe ich keine Ahnung, wie ich das abrufen kann, da der wrap mit dem UL-Tag ja ausserhalb der Menüzustände erfolgt...

Hier mal mein TS:

```typoscript
plugin.freeCssDropDownMenu.horizontal >
plugin.freeCssDropDownMenu.horizontal = HMENU
plugin.freeCssDropDownMenu.horizontal {
  special = directory
  special.value = 34
  #excludeUidList = 35
  if {
    value = 1
    equals = 1
  }
  1 = TMENU
  1 {
    wrap = <ul class="dropdown dropdown-linear dropdown-columnar"> | </ul>
    expAll = 1
    noBlur = 1
    NO = 1
    NO {
      ATagTitle.field = abstract // description // subtitle // title
      wrapItemAndSub = <li> | </li>
      stdWrap.htmlSpecialChars = 1
    }
    IFSUB < .NO
    IFSUB {
      wrapItemAndSub = <li class="dir"> | </li>
    }
    CUR < .NO
    CUR {
      wrapItemAndSub = <li class="act-cat"> | </li>
    }
    CURIFSUB < .NO
    CURIFSUB {
      wrapItemAndSub = <li class="act-cat-dir"> | </li>
    }
    ACTIFSUB < .NO
    ACTIFSUB {
      wrapItemAndSub = <li class="act-cat-sub"> | </li>
    }
  }
  2 < .1
  2.wrap = <ul> | </ul>
  2.CUR.wrapItemAndSub = <li class="act-page"> | </li>
  3 < .2
  4 < .2
  5 < .2
}

lib.nav.20 <  plugin.freeCssDropDownMenu.horizontal
```

Hat jemand eine Ahnung, wie ich den UL-Tag der zweiten Ebene nur für die aktive Ebene ändern kann?

Hier wär noch der von Typo3 ausgespuckte HTML-Quelltext:

```html
<ul class="dropdown dropdown-linear dropdown-columnar">

 <li>
  <a title="Home" target="_self" href="http://domain.de/">Home</a>
 </li>

 <li class="dir">
  <a title="Kontakt" target="_self" href="kontakt.html">Kontakt</a>
   <ul>
    <li>
     <a title="Einkauf Buchhaltung" target="_self" href="kontakt/einkauf-buchhaltung.html">Einkauf Buchhaltung</a>
    </li>
    <li>
     <a title="Technik" target="_self" href="kontakt/technik.html">Technik</a>
    </li>
    <li>
     <a title="Verkaufsinnendienst" target="_self" href="kontakt/verkaufsinnendienst.html">Verkaufsinnendienst</a>
    </li>
    <li>
     <a title="Vertrieb" target="_self" href="kontakt/vertrieb.html">Vertrieb</a>
    </li>
   </ul>
  </li>

 <li class="act-cat-sub">
  <a title="Service" target="_self" href="service.html">Service</a>
   <ul>
    <li>
     <a title="Anfahrt" target="_self" href="anfahrt.html">Anfahrt</a>
    </li>
    <li class="act-page">
     <a title="Downloads" target="_self" href="downloads.html">Downloads</a>
    </li>
    <li>
     <a title="Richtlinien" target="_self" href="richtlinien.html">Richtlinien</a>
    </li>
   </ul>
  </li>

 <li class="dir">
  <a title="Leistungen" target="_self" href="leistungen.html">Leistungen</a>
   <ul>
    <li>
     <a title="Weiterverarbeitung" target="_self" href="leistungen/weiterverarbeitung.html">Weiterverarbeitung</a>
    </li>
    <li>
     <a title="Rollenoffset" target="_self" href="leistungen/rollenoffset.html">Rollenoffset</a>
    </li>
    <li>
     <a title="Bogenoffset" target="_self" href="leistungen/bogenoffset.html">Bogenoffset</a>
    </li>
    <li>
     <a title="Vorstufe" target="_self" href="leistungen/vorstufe.html">Vorstufe</a>
    </li>
   </ul>
  </li>

 <li class="dir">
  <a title="Unternehmen" target="_self" href="unternehmen.html">Unternehmen</a>
   <ul>
    <li>
     <a title="Verbundene Unternehmen" target="_self" href="unternehmen/verbundene-unternehmen.html">Verbundene Unternehmen</a>
    </li>
    <li>
     <a title="Ausbildung" target="_self" href="unternehmen/ausbildung.html">Ausbildung</a>
    </li>
    <li>
     <a title="Jobs" target="_self" href="unternehmen/jobs.html">Jobs</a>
    </li>
    <li>
     <a title="Umwelt Qualität" target="_self" href="unternehmen/umwelt-qualitaet.html">Umwelt Qualität</a>
    </li>
    <li>
     <a title="Portrait" target="_self" href="unternehmen/portrait.html">Portrait</a>
    </li>
   </ul>
  </li>

</ul>
```

Danke im voraus,
Huaba

## Beste Antwort

**Unbekannter Benutzer** · 2010-09-22 · [Beitrag #3](https://www.typo3.net/d/101242-freecssdropdown-mit-unterschiedlichen-klassen-bei-ul/3)

Hm, manchmal sieht man den Wald vor lauter Bäumen nicht :D

Der normale UL mit dem position und dem z-index war im CSS so angegeben:

```css
ul.dropdown ul {
 visibility: hidden;
 position: absolute;
 top: 100%;
 left: 0;
 z-index: 63;
 width: 100%;
}
```

Hab einfach noch eine Klasse hinzugefügt und schon gehts:

```css
li.act-cat-sub ul {
 visibility: hidden;
 position: absolute;
 top: 100%;
 left: 0;
 z-index: 60;
 width: 100%;
}
```

## Antworten

### [#2](https://www.typo3.net/d/101242-freecssdropdown-mit-unterschiedlichen-klassen-bei-ul/2) · Unbekannter Benutzer · 2010-09-20

Keiner eine Idee :'(

Gruß
Huaba

### [#3](https://www.typo3.net/d/101242-freecssdropdown-mit-unterschiedlichen-klassen-bei-ul/3) · Unbekannter Benutzer · 2010-09-22 · Beste Antwort

(Text siehe oben unter „Beste Antwort“.)

---

Quelle: „freecssdropdown mit unterschiedlichen Klassen bei UL“, typo3.net, https://www.typo3.net/d/101242-freecssdropdown-mit-unterschiedlichen-klassen-bei-ul
Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.
