---
title: "CSS Dropdown menü"
url: "https://www.typo3.net/d/82075-css-dropdown-menue"
source: "typo3.net"
tags: ["TYPO3","Menüs","Frage"]
created: "2008-09-23"
last_reply: "2008-09-23"
replies: 1
solved: false
page: 1
pages: 1
lang: "de"
---

# CSS Dropdown menü

TYPO3 › Menüs · 1 Antwort · gestartet 2008-09-23

## Eröffnungsbeitrag

**spielmann** · 2008-09-23 · [Beitrag #1](https://www.typo3.net/d/82075-css-dropdown-menue/1)

Wie setze ich ein derartiges Menu in TS um?
javascript:emoticon('#angry#')
Ich komme einfach nicht weiter, als HTML eingefügt funktioniert es einwandfrei, doch dynamisch wird es kompliziert.

```html
<ul id="navigation-1">

<li><a href="seite1.html" title="seite1"> seite1 |</a>
        	<ul class="navigation-2">
            <li><a href="seite1_1.html" title="seite1_1">seite1_1</a></li>
            <li><a href="seite1_2.html" title="seite1_2">seite1_2 <span>»</span></a>
       		  		<ul class="navigation-3">
					<li><a href="seite1_2_1.html" title="seite1_2_1">seite1_2_1</a></li>
					</ul>            
     		</li>  
            </ul>

</li>

<li><a href="seite2.html" title="seite2"> seite2 |</a></li>
<li><a href="seite3.html" title="seite3"> seite3 </a></li>        

</ul>
```

```typoscript
page.10 {

subparts.NAVIGATION = HMENU
subparts.NAVIGATION {
	special = directory
	special.value = 1
	1 = TMENU
  1 {
	  expAll = 0
    wrap = <ul id="navigation-1">|</ul>
      NO = 1
      NO {
        linkWrap = <li>| </li>
      }
    IFSUB = 0
    IFSUB {
      wrapItemAndSub = <ul id="navigation-2">|</ul>
      linkWrap = <li>|</li>
      
    }
  }
	2 < .1
  2 {
    wrap = <ul id="navigation-2">|</ul>
	IFSUB = 0
    	IFSUB {
      after = |*||*| <span>»</span>
      wrapItemAndSub = <ul id="navigation-2">|</ul>
      linkWrap = <li>|</li>
      #ATagParams = class="daddy"
    }
  }
	3 < .2
   3 {
    wrap = <ul id="navigation-3">|</ul>
	IFSUB = 0
    	IFSUB {
        wrapItemAndSub = <ul id="navigation-2">|</ul>
        linkWrap = <li>|</li><br />
      #ATagParams = class="daddy"
    }
  }
}

}
```

> ul#navigation-1
> 	{ margin:0; padding:0px 0; list-style:none; width:100%; height:13px; font:normal 9px verdana, arial, helvetica;}
>
> ul#navigation-1 li
> 	{ margin:0; padding:0 0 0 0px; display:block; float:left; position:relative;}
> ul#navigation-1 li a:link,
> ul#navigation-1 li a:visited
> 	{ padding:4px 0; display:block; text-align:left; text-decoration:none; background:#8C3F17; color:#eeeeee; /*width:148px;*/ height:13px; }
> ul#navigation-1 li:hover a,
> ul#navigation-1 li a:hover,
> ul#navigation-1 li a:active
> 	{ padding:4px 0; display:block; text-align:left; text-decoration:none; background:#9D4F18; color:#ffffff; /*width:146px;*/ height:13px; border-left:0px solid #ffffff; border-right:0px solid #ffffff; }
>
> ul#navigation-1 li ul.navigation-2
> 	{ margin:0; padding:1px 1px 0 1px; list-style:none; display:none; background:#9D4F18; /*width:146px;*/ position:absolute; top:21px; left:0px; border:0px; border-top:none; }
> ul#navigation-1 li:hover ul.navigation-2
> 	{ display:block; }
> ul#navigation-1 li ul.navigation-2 li
> 	{ width:156px; clear:left;}
>
> ul#navigation-1 li ul.navigation-2 li a:link,
> ul#navigation-1 li ul.navigation-2 li a:visited
> 	{ clear:left; background:#CB6C44; padding:4px 0; width:156px; border:none; position:relative; z-index:1000; }
> ul#navigation-1 li ul.navigation-2 li:hover a,
> ul#navigation-1 li ul.navigation-2 li a:active,
> ul#navigation-1 li ul.navigation-2 li a:hover
> 	{ clear:left; background:#DB7C45; padding:4px 0; width:156px; border:none; position:relative; z-index:1000; }
>
> ul#navigation-1 li ul.navigation-2 li ul.navigation-3
> 	{ display:none; margin:0; padding:0; list-style:none; position:absolute; left:155px; top:-1px; padding:0px 1px 0 1px; border:none;/*:none; border-top: 1px solid #9D4F18;*/ z-index:900; }
> ul#navigation-1 li ul.navigation-2 li:hover ul.navigation-3
> 	{ display:block; }
> ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:link,
> ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:visited
> 	{ background:#DC7D55; }
> ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li:hover a,
> ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:hover,
> ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:active
> 	{ background:#DD8D66; }
> ul#navigation-1 li ul.navigation-2 li a span
> 	{ position:absolute; top:0; left:142px; font-size:12pt; color:#333333; }
> ul#navigation-1 li ul.navigation-2 li:hover a span,
> ul#navigation-1 li ul.navigation-2 li a:hover span
> 	{ position:absolute; top:0; left:142px; font-size:12pt; color:#ffffff; }

[/quote] #angry#  #angry#

## Antworten

### [#2](https://www.typo3.net/d/82075-css-dropdown-menue/2) · SLAng · 2008-09-23

Oh Gott...  :o

Was soll denn daran kompliziert sein?

Das hier generiert dir das Menü:

```typoscript
subparts.NAVIGATION = HMENU
subparts.NAVIGATION {
        1 = TMENU
	1 {
		expAll = 0
		wrap = <ul id="navigation-1">|</ul>
		NO = 1
		NO {
			wrapItemAndSub = <li>|</li>
		}
	}
        2 < .1
	2 {
		wrap = <ul id="navigation-2">|</ul>
	}
        3 < .2
	3 {
		wrap = <ul id="navigation-3">|</ul>
	}
}
```

Deinen ganzen IFSUB Kram hab ich rausgeschmissen, denn dass hast du ja sowies mit 0 deaktiviert oder was hast du da vor???
Außerdem kannst du doch nicht in nem Menüzustand nochmal nen ul definieren...
List Menüs können nicht mit linkWrap erstellt werden, wenn es mehere Ebenen hat, da sonst die Listenpunkte nicht korrekt geöffnet und geschlossen werden.

---

Quelle: „CSS Dropdown menü“, typo3.net, https://www.typo3.net/d/82075-css-dropdown-menue
Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.