---
title: "vertikales ausklappbares 4 Ebenen Menu auf CSS Basis"
url: "https://www.typo3.net/d/59614-vertikales-ausklappbares-4-ebenen-menu-auf-css-basis"
source: "typo3.net"
tags: ["TYPO3","Menüs","Frage","HTML & CSS"]
created: "2007-03-18"
last_reply: "2007-03-18"
replies: 0
solved: false
page: 1
pages: 1
lang: "de"
---

# vertikales ausklappbares 4 Ebenen Menu auf CSS Basis

TYPO3 › Menüs · 0 Antworten · gestartet 2007-03-18

## Eröffnungsbeitrag

**matsie** · 2007-03-18 · [Beitrag #1](https://www.typo3.net/d/59614-vertikales-ausklappbares-4-ebenen-menu-auf-css-basis/1)

Hallo,

**Ziel**: Ein vertikales Menu auf der linken Seite, wobei die Submenu-Items nach unten ausklappen; das Menu soll 4 Unterebenen haben.

**Problem**: Das Menu zeigt nur die Ebenen bis zur 2. Ebene an.

**Frage**: Wie erreiche ich, dass sämtliche Unterebenen oder Submenus  (3, 4, ...) jeweils angezeigt werden?

**Ausgangslage**:

```typoscript
temp.MenuLinks = HMENU
temp.MenuLinks {
entryLevel=0
    # erstes level
  1 = TMENU
  1.wrap = <ul id="navi">|</ul>
  1{
    	  # no state: normale Formatierung
    noBlur=1 
    NO{
      wrapItemAndSub = <li>|</li>
    }
     		# act state: gültig von der rootseite bis zur aktuellen Seite
    ACT=1
    ACT{
      wrapItemAndSub = <li>|</li>
      ATagParams = class = "nohref act"
    }
     		# cur state: gültig für die aktuelle Seite
#    CUR=1
#    CUR{
#      wrapItemAndSub = <li class="act">|</li>
#    }
  }

  2 = TMENU
  2.wrap = <ul id="navi">|</ul>
  2{
    	  # no state: normale Formatierung
    noBlur=1 
    NO{
      wrapItemAndSub = <li>|</li>
    }
     		# act state: gültig von der rootseite bis zur aktuellen Seite
    ACT=1
    ACT{
      wrapItemAndSub = <li>|</li>
      ATagParams = class = "nohref act"
    }
     		# cur state: gültig für die aktuelle Seite
#    CUR=1
#    CUR{
#      wrapItemAndSub = <li class="act">|</li>
#    }
  }

  3 = TMENU
  3.wrap = <ul id="navi">|</ul>
  3{
    	  # no state: normale Formatierung
    noBlur=1 
    NO{
      wrapItemAndSub = <li>|</li>
    }
     		# act state: gültig von der rootseite bis zur aktuellen Seite
    ACT=1
    ACT{
      wrapItemAndSub = <li>|</li>
      ATagParams = class = "nohref act"
    }
     		# cur state: gültig für die aktuelle Seite
#    CUR=1
#    CUR{
#      wrapItemAndSub = <li class="act">|</li>
#    }
  }

  4 = TMENU
  4.wrap = <ul id="navi">|</ul>
  4{
    	  # no state: normale Formatierung
    noBlur=1 
    NO{
      wrapItemAndSub = <li>|</li>
    }
     		# act state: gültig von der rootseite bis zur aktuellen Seite
    ACT=1
    ACT{
      wrapItemAndSub = <li>|</li>
      ATagParams = class = "nohref act"
    }
     		# cur state: gültig für die aktuelle Seite
#    CUR=1
#    CUR{
#      wrapItemAndSub = <li class="act">|</li>
#    }
  }

}
```

HTML

```html
<div id="content_wrap">
   <!-- Navigation -->
	<div id="nav">
	 <!-- ###MENU_LINKS### Start -->
	Menu
	<!-- ###MENU_LINKS### Stop -->
	</div>
</div>
```

CSS

> #nav
> {
> 	clear:left;
> 	float:left;
> 	width:150px;
> 	margin:0 0 10px 0;
> 	padding:0;
> }
>
> #nav ul
> {
> 	list-style:none;
> 	width:159px;
> 	margin:0 0 0 0;
> 	padding:0;
> 	}
>
> #nav li
> {
> 	margin-bottom:0px;
> }
>
> #nav li a
> {
> 	font-weight:normal;
> 	font-size:10px;
> 	height:20px;
> 	text-decoration:none;
> 	color:#505050;
> 	display:block;
> 	padding-left:30px;
> 	padding-top:5px;
> 	padding-bottom:0px;
> 	background:#f4f4f4 url(../images/menu.jpg) bottom left repeat-x;
> }
>
> #nav li a:hover
> {
> 	background-image:url(../images/menu_hover.jpg);
> 	background-repeat:no-repeat;
> 	background-position:bottom;
> 	color:#000000;
> }
>
> #navi li .act
> {
> 	background-image:url(../images/menu_act.jpg);
> 	background-repeat:no-repeat;
> 	background-position:bottom;
> 	color:#000000;
> 	font-weight: bolder;
> }
>
> #nav li li a
> {
> 	font-weight:normal;
> 	font-size:10px;
> 	height:20px;
> 	text-decoration:none;
> 	color:#505050;
> 	display:block;
> 	padding-left:40px;
> 	padding-top:5px;
> 	padding-bottom:0px;
> 	background:#f4f4f4 url(../images/menu_sub.jpg) bottom left repeat-x;
> }
>
> #nav li li a:hover
> {
> 	background-image:url(../images/menu_hover_sub.jpg);
> 	background-repeat:no-repeat;
> 	background-position:bottom;
> 	color:#000000;
> 	font-weight: bolder;
> }
>
> #navi li li .act
> {
> 	background-image:url(../images/menu_sub_act.jpg);
> 	background-repeat:no-repeat;
> 	background-position:bottom;
> 	color:#000000;
> 	font-weight: bolder;
> }

---

Quelle: „vertikales ausklappbares 4 Ebenen Menu auf CSS Basis“, typo3.net, https://www.typo3.net/d/59614-vertikales-ausklappbares-4-ebenen-menu-auf-css-basis
Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.