---
title: "einfaches menu ?"
url: "https://www.typo3.net/d/107337-einfaches-menu"
source: "typo3.net"
tags: ["TYPO3","Menüs","Frage"]
created: "2011-09-16"
last_reply: "2011-09-17"
replies: 3
solved: false
page: 1
pages: 1
lang: "de"
---

# einfaches menu ?

TYPO3 › Menüs · 3 Antworten · gestartet 2011-09-16

## Eröffnungsbeitrag

**The_C** · 2011-09-16 · [Beitrag #1](https://www.typo3.net/d/107337-einfaches-menu/1)

hallo,
kann mir bitte jemand bei der umsetzung des menu helfen, ich verstehe nicht warumm das mit meinem ts nicht funktioniert... ich stehe voll auf der leitung.
danke schon mal jetzt für eure hilfe!

```typoscript
lib.field_nav = HMENU
lib.field_nav {
  wrap = <ul class="navigation">|</ul>
  1 = TMENU
  1 {
    wrapItemAndSub = <li>|</li>
    expAll = 1
    noBlur = 1
    NO = 1
    NO {
      allWrap = <li class="links">|</li>
      doNotLinkIt = 0
    }
      ACT < .NO
      ACT.ATagParams = class="aktiv"
  }
  2 = TMENU
  2 {
    expAll = 1
    noBlur = 1
    wrap = <ul>|</ul>
  }
}
```

```html
<ul class="navigation">
          <li class="links"><a href="#">Home</a>
            <ul>
              <li class="links"><a href="#">untermenü 1</a></li>
              <li class="links"><a href="#">untermenü 2</a></li>
              <li class="links"><a href="#">untermenü 3</a></li>
            </ul>
          </li>
        
          <li><a href="#">Über uns</a>
            <ul>
              <li><a href="#">untermenü 1</a></li>
              <li><a href="#">untermenü 2</a></li>
            </ul>
          </li>
          <li><a href="#">Technik</a>
            <ul>
              <li><a href="#">untermenü 1</a></li>
              <li><a href="#">untermenü 2</a></li>
              <li><a href="#">untermenü 3</a></li>
            </ul>
          </li>
          <li><a href="#">Kontakt</a>
            <ul>
              <li><a href="#">untermenü 1</a></li>
            </ul>
          </li>
          <li><a href="#">Anfahrt</a></li>
        </ul>
```

```css
ul {
	float: left;
	list-style: none; 
	position: relative;
	margin: -35px 0 0 218px;
}

ul li {
	float:left;	
}

ul li a {
	font-family:"Trebuchet MS";
	font-size:16px;
	font-weight:bold;
	text-align:left;
	color: #fff;
	text-decoration: none;
	width: 121px;
	padding: 4px 4px 4px 10px;
	background: #B92620;
	display: block;
	border-left:1px solid #FFF;
	border-bottom:1px solid #FFF;
	margin:0;
}

ul li ul {
	display: none;
}

ul li:hover ul {
	display: block;
	position: absolute;
	margin: 0 0 0 -39px;
}

ul li:hover > a {
	background: #98999C;
}

ul li ul li{
	float:none;
}

ul li ul li a {
	font-weight:normal;
	font-size: .8em;
	border:none;
	padding-left: 15px;
	width: 116px;
	border-bottom: 1px solid #fff;
}

/*_______________________________________________________________________
Abgerundetes Eck Links 
_______________________________________________________________________*/

ul li.links {
	float:left;	
}

ul li.links a {
	font-family:"Trebuchet MS";
	font-size:16px;
	font-weight:bold;
	text-align:left;
	color: #fff;
	text-decoration: none;
	width: 121px;
	padding: 4px 4px 4px 10px;
	background: #B92620;
	display: block;
	border-left:1px solid #FFF;
	border-bottom:1px solid #FFF;
	margin:0;
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-topright: 0px;
	-moz-border-radius-bottomright: 0px;
	-moz-border-radius-bottomleft: 0px;
	-webkit-border-radius: 10px 0px 0px 0px;
	border-radius: 10px 0px 0px 0px;
}

ul li.links ul {
	display: none;
}

ul li.links:hover ul {
	display: block;
	position: absolute;
	margin: 0 0 0 -39px;
}

ul li.links:hover > a {
	background: #98999C;
}

ul li.links ul li{
	float:none;
}

ul li.links ul li a {
	font-weight:normal;
	font-size: .8em;
	border:none;
	padding-left: 15px;
	width: 116px;
	border-bottom: 1px solid #fff;
	-moz-border-radius:0px;
	border-radius: 0px;
}

/*_______________________________________________________________________
IE Hacks 
_______________________________________________________________________*/
*+html ul {
	margin: -42px 0 0 283px;
	position: relative;
	width: 680px;
}

*+html ul li:hover ul, *+html ul li.links:hover ul {
	display: block;
	position: absolute;
	margin: 0px;
}
*+html ul li a, *+html ul li.links a  {
	width: 116px;
}

*+html ul li ul li a, *+html ul li.links ul li a {
	font-weight:normal;
	font-size: .8em;
	border:none;
	padding-left: 15px;
	margin-left: 1px;
	width: 111px;
	border-bottom: 1px solid #fff;
	margin-top: -1px;
}
```

## Antworten

### [#2](https://www.typo3.net/d/107337-einfaches-menu/2) · etux · 2011-09-17

> **The_C schrieb:**
>
> ... warumm das mit meinem ts nicht funktioniert...

Weil es fehlerhaft ist.
Wie es richtig geht, kannst Du u.A. auch hier sehen:
[/d/65143-die-wichtigsten-menues-in-typo3-auf-einem-blick](https://www.typo3.net/d/65143-die-wichtigsten-menues-in-typo3-auf-einem-blick)

.

### [#3](https://www.typo3.net/d/107337-einfaches-menu/3) · etux · 2011-09-17

> **The_C schrieb:**
>
> hallo,
>  momentan bich ich so weit gekommen das es richtig angezeitg wird aber leider immer noch falsch ist.
>  die <ul><li><a href="8/">Test 1</a></li> hat keinen hover was ist da bitte falsch..

Keine Ahnung wie Du das meinst. Warum postest Du nicht einen Link zu Deiner Website?

Für die „absolute“ positionierte UL (Unterebene) agiert die UL der Hauptebene als „Containing Block“. Ist das so gewollt? Oder willst Du die Unterebene an der entsprechenden LI der Hauptebene ausrichten? In diesem Fall sollten die LIs der Hauptebene die „position: relative;“ bekommen und nicht die UL.
Was soll der negative linke Margin bewirken?

.

### [#4](https://www.typo3.net/d/107337-einfaches-menu/4) · The_C · 2011-09-17

ist erledigt es lag am css hat noch gefehlt :o
    ul li.links ul li:hover > a {
    background: none repeat scroll 0 0 #98999C;
    }

---

Quelle: „einfaches menu ?“, typo3.net, https://www.typo3.net/d/107337-einfaches-menu
Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.