---
title: "Drop-Down Menue wrappen"
url: "https://www.typo3.net/d/53648-drop-down-menue-wrappen"
source: "typo3.net"
tags: ["Allgemein","Frage"]
created: "2006-11-20"
last_reply: "2006-11-20"
replies: 2
solved: false
page: 1
pages: 1
lang: "de"
---

# Drop-Down Menue wrappen

Allgemein · 2 Antworten · gestartet 2006-11-20

## Eröffnungsbeitrag

**T3-Anfängerin** · 2006-11-20 · [Beitrag #1](https://www.typo3.net/d/53648-drop-down-menue-wrappen/1)

Hallo Typo3'ler,

da ich hier neu bin möchte ich mich erst mal vorstellen. Ich bin die Anja. Beruflich hab ich viel mit Menschen zu tun. Webseitendesign mache ich weil es mir einfach Spaß macht. Seit neuem traue ich mich an Typo3 ran. Ich halte es für ein tolles System. Ich habe aber vor allem mit TypoScript noch einige Anfängerprobleme.
Vielleicht kann mir dabei jemand über die ersten Hürden helfen.

zu meinem Problem:
ich habe ein dropdown Menue mit CSS. Das möchte ich gerne in Typo3 dynamisch machen. Ich bekomme den Wrap aber nicht hin.

Das CSS:
/* CSS Document */

/*
	Menue-styles fuer non-IEs
	Achtung:
	Fuer non-IEs gilt das Stylesheet 'dropdown.css'!
	Fuer IE gilt das Stylesheet 'fix-ie.css' (per CC)!
*/

#menuebox {
position: relative;
height: 30px;
}
.stupidie {
display: none;
}
#menue {
position:absolute;
top: 5px;
left: 0;
z-index: 200;
}

#menue .aussen {
float: left;
display: block;
overflow: hidden;
width: 8em;
height: 1.3em;
font-weight: bold;
text-align: center;
background-color: #dec79a;
color: #513913;
border: 1px solid;
border-color: #d0843e #78561d #78561d #d0843e;
}
#menue .aussen:hover {
height: auto;
background-color: #624617;
color: #fff;
}

a.innen-1 {
margin-top: 2px;
}
a.innen,
a.innen-1 {
display: block;
width: 7.9em;
padding: 2px 0;
text-decoration: none;
font-weight: normal;
border-bottom: 1px solid #78561d;
background-color: #ecd8ae;
color: #600;
}
a:visited.innen,
a:visited.innen-1 {
background-color: #ecd8ae;
color:#555;
}
a:hover.innen,
a:hover.innen-1 {
background-color: #f7eedb;
color: #900;
}

span.menutag {
display: block;
cursor: default;
}

++++++++++++++++++++
   CSS Teil II
++++++++++++++++++++

/*
	Menue-styles fuer IEs
	Am besten per Conditional Comment einbinden.
	Fuer IE5.5 und 5.0 muessen nur geringfuegige kosmetische
	Anpassungen vorgenommen werden (siehe Kommentare).
*/

#menue {
display:none;
}
.stupidie {
display: block;
position: absolute;
top: 5px;
left: 0;
z-index: 200;
}

a.auss {
float: left;
width: 8em;
height: 1.4em;
overflow: hidden;
display: block;
font-weight: bold;
text-align: center;
text-decoration: none;
background-color: #dec79a;
color: #513913;
border: 1px solid;
border-color: #d0843e #78561d #78561d #d0843e;
}
a:hover.auss {
overflow: visible;
background-color: #624617;
color: #fff;
}
a:hover.auss table {
display: block;
margin-top: 3px;
background-color: #dec79a;
color: #400;
border-collapse: collapse;
}

a.inn {
display: block;
width: 7.9em; /* fuer 5er IEs anpassen, sonst 'zuckt' es */
padding: 2px 0;
font-size: 100%; /* fuer 5er IEs auf 80% reduzieren */
font-weight: normal;
text-align: center;
text-decoration: none;
border-bottom: 1px solid #78561d;
background-color: #ecd8ae;
color: #600;
}
a:visited.inn {
background-color: #ecd8ae;
color:#444;
}
a:hover.inn {
position: relative;
background-color: #f7eedb;
color: #900;
}
span.menutag {
display: block;
cursor: default;
}

---------------------------------------
und ab hier html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"<http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>">
<html lang="de" xmlns="<http://www.w3.org/1999/xhtml>" xml:lang="de">
<head>
 <title>Das Blau</title>
 <meta name="keywords" lang="de" xml:lang="de" content="" />
 <meta name="description" lang="de" content="" />
 <meta name="title" lang="de" xml:lang="de" content="" />
 <meta name="DC.identifier" scheme="DCTERMS.URI" content="" />
 <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
 <meta http-equiv="content-language" content="deutsch" />

<link rel="stylesheet" type="text/css" media="screen" title="Standard" href="dropdown.css" />
</head>

<body>
<div id="menuebox">

<div id="menue">
		<div class="aussen">
<span class="menutag">Produkte</span>
<a class="innen-1" href="#">Systeme</a>
<a class="innen" href="#">Speicher</a>
<a class="innen" href="#">Laufwerke</a>
<a class="innen" href="#">Monitore</a>
<a class="innen" href="#">Drucker</a>
<a class="innen" href="#">Zubehör</a>		</div>
		<div class="aussen">
<span class="menutag">Leistungen</span>
<a class="innen-1" href="#">Netzwerke</a>
<a class="innen" href="#">Server</a>
<a class="innen" href="#">Wartung</a>		</div>
		<div class="aussen">
<span class="menutag">Service</span>
<a class="innen-1" href="#">Reparatur</a>
<a class="innen" href="#">Konfiguration</a>
<a class="innen" href="#">Software</a>
<a class="innen" href="#">Schulung</a>		</div>
		<div class="aussen">
<span class="menutag">Links</span>
<a class="innen-1" href="#">About Us</a>
<a class="innen" href="#">Partner</a>
<a class="innen" href="#">Referenzen</a>		</div>
	</div><!-- menue -->

<!-- Der folgende Block bedient nur IEs!
	 Durch diese Redundanz vermeiden wir den Einsatz von Javascript. -->

<!--[if IE]>
	<div class="stupidie">
<a class="auss" href="#"><span class="menutag">Produkte</span>
<table><tr><td>
<a class="inn" href="#">Systeme</a>
<a class="inn" href="#">Speicher</a>
<a class="inn" href="#">Laufwerke</a>
<a class="inn" href="#">Monitore</a>
<a class="inn" href="#">Drucker</a>
<a class="inn" href="#">Zubehör</a>
</td></tr></table>
</a>
<a class="auss" href="#"><span class="menutag">Leistungen</span>
<table><tr><td>
<a class="inn" href="#">Netzwerke</a>
<a class="inn" href="#">Server</a>
<a class="inn" href="#">Wartung</a>
</td></tr></table>
</a>
<a class="auss" href="#"><span class="menutag">Service</span>
<table><tr><td>
<a class="inn" href="#">Reparatur</a>
<a class="inn" href="#">Konfiguration</a>
<a class="inn" href="#">Software</a>
<a class="inn" href="#">Schulung</a>
</td></tr></table>
</a>
<a class="auss" href="#"><span class="menutag">Links</span>
<table><tr><td>
<a class="inn" href="#">About Us</a>
<a class="inn" href="#">Partner</a>
<a class="inn" href="#">Referenzen</a>
</td></tr></table>
</a>
	</div><!-- stupidie -->
<![endif]-->
</div>
<!-- menuebox -->
</body>
</html>

Beispiel: unter folgendem Link:
<http://web432.adebes.de/fileadmin/templates/dropdown.html>

Es wäre toll, wenn mir jemand helfen könnte.
vielen lieben Dank
Anja

## Antworten

### [#2](https://www.typo3.net/d/53648-drop-down-menue-wrappen/2) · einpraegsam.​net · 2006-11-20

Hallo Anja,

was du suchst, ist ein TMENU Layers (unter Dropdown verstehe ich eine Selectbox).

Meiner Meinung nach der beste Thread zu dem Thema:
[/d/39055-menues-basierend-auf-css](https://www.typo3.net/d/39055-menues-basierend-auf-css)

Grüße und viel Erfolg mit TYPO3

### [#3](https://www.typo3.net/d/53648-drop-down-menue-wrappen/3) · T3-Anfängerin · 2006-11-20

Hallo Wunschtacho,
vielen Dank für Deinen Tipp.
Das schaue ich mir morgen gleich näher an.

viele Grüße
Anja

---

Quelle: „Drop-Down Menue wrappen“, typo3.net, https://www.typo3.net/d/53648-drop-down-menue-wrappen
Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.
