---
title: "eingerücktes untermenü"
url: "https://www.typo3.net/d/53653-eingeruecktes-untermenue"
source: "typo3.net"
tags: ["TYPO3","Menüs","Frage"]
created: "2006-11-20"
last_reply: "2006-11-20"
replies: 4
solved: false
page: 1
pages: 1
lang: "de"
---

# eingerücktes untermenü

TYPO3 › Menüs · 4 Antworten · gestartet 2006-11-20

## Eröffnungsbeitrag

**WebNancy** · 2006-11-20 · [Beitrag #1](https://www.typo3.net/d/53653-eingeruecktes-untermenue/1)

so eine frage wurde erfolgreich gelöst, hier gleich die zweite  :o

ich möchte eine aufgeklappte navi links einrücken. soweit geht das auch, aber die entsprechende linie unter des jeweiligen punktes soll auch eingerückt sein.

hier der ist-zustand:

[Bild: internetdesign-erkner.de/left.jpg](http://www.internetdesign-erkner.de/left.jpg)

und so soll es recht bald aussehen:

[Bild: internetdesign-erkner.de/navi.gif](http://www.internetdesign-erkner.de/navi.gif)

hier mein css:

```html
#left-menu ul {
	margin: 0;
	padding: 0;
	overflow: hidden;
	list-style-type: none;
}

#left-menu ul a {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1.0em;
	font-weight: bold;
	text-decoration: none;
	display: block;
}

#left-menu ul li {
	display: block;
	padding: 0;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #4C936B;
	/*border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #4C936B;*/
	background: #FFFFFF;
}
#left-menu .menu1 a{
	background: url(../img/kompakt.gif) !important;
	background-repeat: repeat-y !important; 
	/*background-position: 0 0;*/
}
#left-menu .menu2 a{
	background: url(../img/stadt.gif) !important;
	background-repeat: repeat-y !important; 
}
#left-menu .menu3 a{
	background: url(../img/leben.gif) !important;
	background-repeat: repeat-y !important; 
}
#left-menu .menu4 a{
	background: url(../img/tourismus.gif) !important;
	background-repeat: repeat-y !important; 
}
#left-menu .menu5 a{
	background: url(../img/kommunal.gif) !important;
	background-repeat: repeat-y !important; 
}
#left-menu .menu6 a{
	background: url(../img/rathaus.gif) !important;
	background-repeat: repeat-y !important; 
}
#left-menu li.left-level-1-no a {
	height: auto;
	text-decoration:none;
  	display: block;
	padding: 3px 6px 3px 15px;
	background: #FFFFFF;
	color: #666666;
	background: url(../img/kompakt.gif);
	background-repeat: repeat-y; 
	background-position: 0 0;
}

#left-menu li.left-level-1-no a:hover, #left-menu li.left-level-1-act a {
	height: auto;
	text-decoration: none;
	display: block;
	padding: 3px 6px 3px 15px;
	background: #FFFFFF;
	color: #000000;
	background: url(../img/kompakt.gif);
	background-repeat: repeat-y; 
	background-position: 0 0;
}
#left-menu li.left-level-1-act{
	background-color: #F6F6F6;
}
/*#left-menu li.left-level-1-no a {
	height: auto;
	text-decoration:none;
  	display: block;
	padding: 3px 6px 3px 15px;
	background: #FFFFFF;
	color: #666666;
	background: url(../img/stadt.gif);
	background-repeat: repeat-y; 
	background-position: 0 0;
}

#left-menu li.left-level-1-no a:hover, #left-menu li.left-level-1-act a {
	height: auto;
	text-decoration: none;
	display: block;
	padding: 3px 6px 3px 15px;
	background: #FFFFFF;
	color: #000000;
	background: url(../img/stadt.gif);
	background-repeat: repeat-y; 
	background-position: 0 0;
}*/

#left-menu li.left-level-2-no a {
	height: auto;
	text-decoration: none;
	display: block;
	padding: 3px 6px 3px 18px;
	margin: 0px 0px 0px 7px;
	background: #F6F6F6;
	color: #666666;
}

#left-menu li.left-level-2-no a:hover, #left-menu li.left-level-2-act a {
	height: auto;
	text-decoration: none;
	display: block;
	padding: 3px 6px 3px 18px;
	margin: 0px 0px 0px 7px;
	background: #F6F6F6;
	color: #000000;
}

#left-menu li.left-level-3-no a {
	height: auto;
	text-decoration: none;
	display: block;
	padding: 3px 6px 3px 35px;
	background: #FFFFFF;
	color: #666666;
}

#left-menu li.left-level-3-no a:hover, #left-menu li.left-level-3-act a {
	height: auto;
	text-decoration: none;
	display: block;
	padding: 3px 6px 3px 35px;
	background: #FFFFFF;
	color: #000000;
}
```

und mein ts:

```typoscript
 LEFT-MENU = HMENU 
   LEFT-MENU {
      special = directory 
      special.value = 82
      entryLevel = 1
      1 = TMENU
      1 {
      noBlur = 1
      expAll = 0
      wrap = <ul>|</ul>
      #[UID = 83]
      #     NO.wrapItemAndSub = <li class="left-level-1-no menu1">|</li>
      #[end]
      NO.wrapItemAndSub = <li class="left-level-1-no menu1">|</li> || <li class="left-level-1-no menu2">|</li>||<li class="left-level-1-no menu3">|</li>||<li class="left-level-1-no menu4">|</li>||<li class="left-level-1-no menu5">|</li>||<li class="left-level-1-no menu6">|</li>
      # NO.wrapItemAndSub = <li class="left-level-1-no">|</li>
      NO.ATagTitle.field = abstract // description // subtitle // title
      ACT = 1
      ACT.wrapItemAndSub = <li class="left-level-1-act menu1">|</li> || <li class="left-level-1-act menu2">|</li> || <li class="left-level-1-act menu3">|</li> || <li class="left-level-1-act menu4">|</li> || <li class="left-level-1-act menu5">|</li> || <li class="left-level-1-act menu6">|</li> 
      ACT.ATagTitle.field = abstract // description //subtitle //  title
      }
      2 = TMENU
      2 {
      noBlur = 1
      expAll = 0
      NO.wrapItemAndSub = <li class="left-level-2-no">|</li>
      NO.ATagTitle.field = abstract // description // title
      ACT = 1
      ACT.wrapItemAndSub = <li class="left-level-2-act">|</li>
      ACT.ATagTitle.field = abstract // description // title
      }
      3 = TMENU
      3 {
      noBlur = 1
      expAll = 0
      NO.wrapItemAndSub = <li class="left-level-3-no">|</li>
      NO.ATagTitle.field = abstract // description // title
      ACT = 1
      ACT.wrapItemAndSub = <li class="left-level-3-act">|</li>
      ACT.ATagTitle.field = abstract // description // title
      }
   }
```

ist sicherlich wieder nur ne kleinigkeit die mich verzweifeln lässt  :o  ;)  #angry# [/url]

## Antworten

### [#2](https://www.typo3.net/d/53653-eingeruecktes-untermenue/2) · Unbekannter Benutzer · 2006-11-20

da wo du den Strich setzt einen margin-left setzen

Grüße

Christian

### [#3](https://www.typo3.net/d/53653-eingeruecktes-untermenue/3) · WebNancy · 2006-11-20

> **Kitsunet schrieb:**
>
> da wo du den Strich setzt einen margin-left setzen
>
> Grüße
>
> Christian

hi christian,
da rückt der dann wieder alles ein  :(
du meinst doch, dass ich hier

```html
#left-menu ul li {
        display: block;
        padding: 0;
        margin-left: 5px;
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: #4C936B;
        background: #FFFFFF;
}
```

setzen soll, oder ???

### [#4](https://www.typo3.net/d/53653-eingeruecktes-untermenue/4) · Unbekannter Benutzer · 2006-11-20

Hi,

du musst darfst das natürlich nur auf die li der zweiten Ebene anwenden...

left-menu li.left-level-2-no, #left-menu li.left-level-2-act {

margin-left: 5px;

}

### [#5](https://www.typo3.net/d/53653-eingeruecktes-untermenue/5) · WebNancy · 2006-11-20

hi,
nach etwas probieren und wieder fast verzeifeln: es klappt  :D  :D

dankööööö  :o bin noch blutige anfängerin - aber denke, habe innerhalb einer woche eine menge gelernt  ;)

werde mich mal auf die nächsten sachen stürzen  #angry#

---

Quelle: „eingerücktes untermenü“, typo3.net, https://www.typo3.net/d/53653-eingeruecktes-untermenue
Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.