---
title: "Drop-down Menü (CSS, Typo3)"
url: "https://www.typo3.net/d/72020-drop-down-menue-css-typo3"
source: "typo3.net"
tags: ["TYPO3","Menüs","Frage"]
created: "2008-01-02"
last_reply: "2008-01-04"
replies: 2
solved: false
page: 1
pages: 1
lang: "de"
---

# Drop-down Menü (CSS, Typo3)

TYPO3 › Menüs · 2 Antworten · gestartet 2008-01-02

## Eröffnungsbeitrag

**aleks007** · 2008-01-02 · [Beitrag #1](https://www.typo3.net/d/72020-drop-down-menue-css-typo3/1)

Hallo!

Möchte bei meiner Seite ein drop-down menü erstellen.
CSS-Code und den Code von Typo3 habe ich bereits erstellt, jedoch funktioniert nicht wirklich was.

CSS-Code:
/* MENUE */

ul.menu, ul.menu ul{
list-style-type: none;
}

ul.menu.a {
display-block;
text-align: center;
width: 120px;
padding-top: 5px;
padding-right: 0px;
padding-left: 0px;
padding-bottom: 5px;
font-weight:bold;
color:white;
}

ul.menu ul a {
padding: 0px;
border-right: none;
border-left: none;
}

ul.menu li {
margin:0;
background-image: none;
background-color:black;
float:left;
border: none;
}

ul.menu. ul {
margin-left: 0;
padding: 0px;
position: absolute;
background-color: black;
border 1px solid #FFF9E4;
display: none;
min-width: 120 px;
}

/* Internet Explorer für die Breite */
/*html ul menu ul {
width:118px;
}

/* Dies sind die Klassenstile für das Untermenü wenn sich die Maus */
/* über der Liste befindet (.hover siehe JavaScript oben) */
ul.menu ul.hover, ul.menu li.hover ul, ul.menu li:hover ul {
display: block;
}

ul.menu li.hover, ul.menu li:hover{
background-color: #A6CE39;
}

/* Menüpunkte zweite Ebene */
ul.menu ul li {
float: none;
background-color: transparent;
padding-bottom: 5px;
padding-top: 5px;
border-left: none;
border-right: none;
border-bottom: 1 px solid white;
}

Typo3:

# Die Menüpunkte oben (TOPMENU) erstellen
10.marks{
TOPMENU = HMENU
TOPMENU {
special = directory
special.value = 31
#1. Ebene
1 = TMENU
1 {
wrap = <ul class="menu">|</ul>
expAll = 1
NO.warpItemAndSub = <li onmouseover="show(this)"onmouseout="hide(this)">|</li>
ACT < .NO
ACT = 1
ACT.ATagParams = class="active"
}

####Zweite Ebene####
2 = TMENU
2 {
wrap = <ul onmouseover="show(this)" onmouseout="hide(this)">|</ul>
NO.allwrap = <li>|</li>
}
}
}

Kann jemand helfen???

Lg

## Antworten

### [#2](https://www.typo3.net/d/72020-drop-down-menue-css-typo3/2) · aleks007 · 2008-01-02

mittlerweile werden die Menüpunkte angezeigt, jedoch nicht nebeneinander in dem dafür vorgesehenen bereich (topmenu), sondern untereinander.
vl weiß jemand wie ich dass ändern kann??

**CSS:**

/* MENUE */

ul.menu, ul.menu ul{
	list-style-type: none;
}

ul.menu a {
	display: block;
	text-align: center;
	width: 190px;
	padding-top: 0px;
	padding-right: 0px;
	padding-left: 0px;
	padding-bottom: 0px;
	font-weight:bold;
	color:white;
}

ul.menu ul a {
	padding: 0px;
	border-right: none;
	border-left: none;
}

ul.menu li {
	margin:0;
	background-image: none;
	background-color:black;
	float:left;
	border: none;
}

ul.menu ul {
	margin-left: 0px;
	padding: 0px;
	position: absolute;
	background-color: black;
	border: 1px solid #FFF9E4;
	display: none;
	min-width: 120 px;
}

/* Internet Explorer für die Breite */
*html ul.menu ul {
	width:186px;
}

/* Dies sind die Klassenstile für das Untermenü wenn sich die Maus */
/* über der Liste befindet (.hover siehe JavaScript oben) */
ul.menu ul.hover, ul.menu li.hover ul, ul.menu li:hover ul {
	display: block;
}

ul.menu li.hover, ul.menu li:hover{
	background-color: #A6CE39;
}

/* Menüpunkte zweite Ebene */
ul.menu ul li {
	float: none;
	background-color: transparent;
	padding-bottom: 5px;
	padding-top: 5px;
	border-left: none;
	border-right: none;
	border-bottom: 1 px solid white;
}

**TYPO3:**

# Die Menüpunkte oben (TOPMENU) erstellen

page.10=TEMPLATE
page.10{
	marks.TOPMENU=HMENU
	marks.TOPMENU {
	special = directory
	special.value = 31
	# Erste Ebene
	1 = TMENU
	1 {
		wrap = <ul class="menu">|</ul>
		expAll = 1
		NO.warpItemAndSub = <li onmouseover="show(this)"onmouseout="hide(this)">|</li>
		ACT < .NO
		ACT = 1
		ACT.ATagParams = class="active"
	}

	# Zweite Ebene
	2 = TMENU
	2 {
	wrap = <ul onmouseover="show(this)" onmouseout="hide(this)">|</ul>
	NO.allwrap = <li>|</li>
	}
	}

### [#3](https://www.typo3.net/d/72020-drop-down-menue-css-typo3/3) · Unbekannter Benutzer · 2008-01-04

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

hat einen Schreibfehler...

Ansonsten sieht das gant gut aus. Hast du geguckt, dass dein Doctype in TYPO richtig gesetzt ist?

---

Quelle: „Drop-down Menü (CSS, Typo3)“, typo3.net, https://www.typo3.net/d/72020-drop-down-menue-css-typo3
Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.