---
title: "Komplexes Ausklapp-Menü mit CSS (wie in Typo-Script Umsetzen)"
url: "https://www.typo3.net/d/55862-komplexes-ausklapp-menue-mit-css-wie-in-typo-script-umsetzen"
source: "typo3.net"
tags: ["TYPO3","Menüs","Frage","HTML & CSS"]
created: "2007-01-07"
last_reply: "2007-02-01"
replies: 7
solved: false
page: 1
pages: 1
lang: "de"
---

# Komplexes Ausklapp-Menü mit CSS (wie in Typo-Script Umsetzen)

TYPO3 › Menüs · 7 Antworten · gestartet 2007-01-07

## Eröffnungsbeitrag

**hpatrick** · 2007-01-07 · [Beitrag #1](https://www.typo3.net/d/55862-komplexes-ausklapp-menue-mit-css-wie-in-typo-script-umsetzen/1)

Hallo,

vorweg: Ich bin noch relativ neu in Typo3, hab zwar bereits ein Projekt mit T3 laufen, aber bei diesem Problem weiß ich einfach nicht weiter.

Ich hab mir ein horizontales Ausklappmenü erstellt (bzw. hab auf ein fertiges ausm Internet zurückgegriffen). CSS wählte ich wegen der Barrierefreiheit und so.

Der funktionierende HTML Code dafür lautet:

```html
<div id="menu">
<ul>
	<li>

		<a href="index.html">Menüpunkt 1<!--[if IE 7]><!--></a><!--<![endif]-->

		<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul>
			<li><a href="index.html">Unterpunkt 1</a></li>
			<li><a href="index.html">Unterpunkt 2</li>			
		</ul>
		<!--[if IE 7]><!--></a><!--<![endif]-->
	</li>

	
	<li>

		<a href="index.html">Menüpunkt 2<!--[if IE 7]><!--></a><!--<![endif]-->
		<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul>
			<li><a href="index.html">Unterpunkt 1</a></li>
			<li><a href="index.html">Unterpunkt 2</a></li>			
		</ul>
		<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>

	
	<li>
		<a href="index.html">Menüpunkt 3<!--[if IE 7]><!--></a><!--<![endif]-->
		<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul>
			<li><a href="index.html">Unterpunkt 1</a></li>
			<li><a href="index.html">Unterpunkt 2</a></li>	
			<li><a href="index.html">Unterpunkt 3<!--[if IE 7]><!--></a><!--<![endif]-->

			<!--[if lte IE 6]><table><tr><td><![endif]-->
				<ul class="right_side">
					<li><a href="index.html">Unterpunkt 3.1</a></li>
					<li><a href="index.html">Unterpunkt 3.2</a></li>	
					<li><a href="index.html">Unterpunkt 3.3</a></li>
				</ul>
				<!--[if lte IE 6]></td></tr></table></a><![endif]-->
			</li>
		</ul>

		<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
</ul>
</div>
```

Der CSS Code dazu:

```html
#menu {		
		background-color:#FF9900;
		height:20px;
		width:100%;
		position:relative; 
		margin:0; 
		font-size:11px; 
		margin:20px 0 60px 0; 		
		z-index:100;		
}

#menu a:link {
		color:#000000;
		text-decoration:none;
}

#menu a:visited {
		color:#000000;
		text-decoration:none;
}

#menu a:active {
		color:#000000;
		text-decoration:none;
}

#menu a:hover {
		color:#000000;
		text-decoration:none;
}

#menu ul {
		padding:0;
		margin:0; 
		list-style-type: none;	
		z-index:100;	
}

#menu ul li {
		float:left; 
		border-left-width:1px;
		border-left-style:solid;
		border-left-color:#eee; 
		width:120px;
		list-style-type:none;
		display:inline;
		margin:none;
		z-index:100;
}

#menu ul li a, #menu ul li a:visited {
		display:block; 
		float:left; 
		width:120px; 
		text-decoration:none; 
		padding:0 0 0 5px; 
		line-height:20px; 
		background-color:#FF9900;
		z-index:100;
}

#menu table {
		border-collapse:collapse; 
		margin:0; 
		padding:0; 
		font-size:1em;
		z-index:100;
}

#menu ul li ul {
		visibility:hidden; 
		position:absolute; 
		top:20px; 
		left:0; 
		z-index:90;
}


#menu ul li:hover a, #menu ul li a:hover {
		color:#000000; 
		background-color:#F7AE16;
}

#menu ul li:hover ul, #menu ul li a:hover ul {
		visibility:visible; 
		width:100%;
		background-color:#F7AE16; 
		color:#fff;
		z-index:90;
}

#menu ul li:hover ul.right_side li, #menu ul li a:hover ul.right_side li {
		float:left; 
		border:0; 
		border-left-width:1px;
		border-left-style:solid;
		border-left-color:#eee;
		z-index:100;
}

#menu ul li:hover ul.left_side li, #menu ul li a:hover ul.left_side li {
		float:left; 
		border:0; 
		border-left-width:1px;
		border-left-style:solid;
		border-left-color:#eee;
}

#menu ul li:hover ul li a.sub, #menu ul li a:hover ul li a.sub {
		background-color:#bd8d5e; 
		color:#fff;
}

#menu ul li:hover ul li ul, #menu ul li a:hover ul li a ul {
		visibility:hidden; 
		position:absolute; 
		left:0; 
		top:20px; 
		z-index:100;
}

#menu ul li:hover ul li a, #menu ul li a:hover ul li a {
		display:block; 
		background-color:#F7AE16; 
		color:#000000;
		z-index:100;
}

#menu ul li:hover ul li a:hover, #menu ul li a:hover ul li a:hover {
		background-color:#dfc184; 
		color:#000;
}

#menu ul li:hover ul li:hover ul, #menu ul li a:hover ul li a:hover ul {
		visibility:visible; 
		color:#000; 
		background-color:#dfc184;
		z-index:90;
		margin:0px;
}

#menu ul li:hover ul.right li {
		float:right;
}

#menu ul li:hover ul li:hover ul li a, #menu ul li a:hover ul li a:hover ul li a {
		background-color:#dfc184;
		color:#000;
}

#menu ul li:hover ul li:hover ul li a:hover, #menu ul li a:hover ul li a:hover ul li a:hover {
		background-color:#bd8d5e; 
		color:#fff;
}
```

So natürlich hab ich mich mit meinen bescheidenen TS Kenntnissen schonmal rangesetzt, aber das Ergebnis funktioniert komplett nicht. Gegoogelt hab ich auch schon und ich weiß einfach nicht mehr weiter. Besonders mit den ungewöhnlichen wraps stell ich mich noch an...

Hier mal mein TS Code (auch wenn er falsch ist!):

```typoscript
tmp.NAVIGATION = HMENU
tmp.NAVIGATION {
	1 = TMENU
	1 {
		wrap = <ul> | </ul>
		NO = 1
		NO.wrapItemAndSub = <li> | </li>
		
		ACT < .NO
		ACT.ATagParams= class = "navactive1"
                ACT.doNotLinkIt = 0
	}
	
	2 = TMENU
	2 {
		wrap = <!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul>|</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
		NO = 1
		NO.wrapItemAndSub = <li> | </li>
		
		ACT < .NO
	}
}
```

Vielen Dank für eure Hilfe!!

Patrick

## Antworten

### [#2](https://www.typo3.net/d/55862-komplexes-ausklapp-menue-mit-css-wie-in-typo-script-umsetzen/2) · Unbekannter Benutzer · 2007-01-09

Also, dieses Menü gibts hier im Forum schonmal. Heißt das nicht Ultimate Dropdown oder so? Such mal hier im Forum danach, dann findest du den TS Code dazu. Allerdings ist die Frage ob das die beste Variante ist ein Dropdownmenü zu erstellen, weil es doch recht viele Hacks enthält.

Grüße

Christian

### [#3](https://www.typo3.net/d/55862-komplexes-ausklapp-menue-mit-css-wie-in-typo-script-umsetzen/3) · hpatrick · 2007-01-31

welches Menü würdest du mir denn empfehlen?

Weil das Ultimate-Dropdown Menü löäuft zwar perfekt mit Firefox und Opera, ... jedoch öffnen sich keine Unterebenen im Internet Explorer. Er zeigt nur die oberste Ebene an!

Kennst du ein alternatives Menü, am besten ohne Javascript!

Danke bereits für deine Hilfe!

### [#4](https://www.typo3.net/d/55862-komplexes-ausklapp-menue-mit-css-wie-in-typo-script-umsetzen/4) · just2b · 2007-01-31

> **hpatrick schrieb:**
>
> Kennst du ein alternatives Menü, am besten ohne Javascript!

IE braucht ein js

georg

### [#5](https://www.typo3.net/d/55862-komplexes-ausklapp-menue-mit-css-wie-in-typo-script-umsetzen/5) · hpatrick · 2007-01-31

alles klar....

Welches Menü kannst du mir empfehlen, am besten gleich mit TypoScript, da ich mich derzeit noch in die Funktionen des TMENU einarbeite und noch nicht so glasklare Sicht hab....

### [#6](https://www.typo3.net/d/55862-komplexes-ausklapp-menue-mit-css-wie-in-typo-script-umsetzen/6) · just2b · 2007-02-01

zB <http://www.just2b.com/mein-typo3/css-ts-menues.html> wobei ich gerade leichte Probleme mit dem IE7 habe ..:/

im netz gibts allerdings genügend css-listenmenenüs und das ts dafür ist zu 90% dann immer das selbe

georg

### [#7](https://www.typo3.net/d/55862-komplexes-ausklapp-menue-mit-css-wie-in-typo-script-umsetzen/7) · d.​walter · 2007-02-01

8-)  Psst, nicht weitersagen aber unter dem Link hier findest du extrem (man verzeihe mir den Ausdruck) "geile" Menüs, mit CSS und TS.

<http://www.just2b.com/mein-typo3/css-ts-menues.html>

Aber bitte nicht weitersagen!!  :D  :D

[edit]
Wääääh zu langsam  #angry#  #angry#
[/edit]

### [#8](https://www.typo3.net/d/55862-komplexes-ausklapp-menue-mit-css-wie-in-typo-script-umsetzen/8) · hpatrick · 2007-02-01

vielen Dank! Nun funzt das auch im IE... Vielen Dank!

---

Quelle: „Komplexes Ausklapp-Menü mit CSS (wie in Typo-Script Umsetzen)“, typo3.net, https://www.typo3.net/d/55862-komplexes-ausklapp-menue-mit-css-wie-in-typo-script-umsetzen
Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.