---
title: "Drop Down Menü"
url: "https://www.typo3.net/d/65426-drop-down-menue"
source: "typo3.net"
tags: ["TYPO3","Menüs","Frage"]
created: "2007-07-18"
last_reply: "2007-07-18"
replies: 0
solved: false
page: 1
pages: 1
lang: "de"
---

# Drop Down Menü

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

## Eröffnungsbeitrag

**Unbekannter Benutzer** · 2007-07-18 · [Beitrag #1](https://www.typo3.net/d/65426-drop-down-menue/1)

Hallo, kleines Problem...

Ich habe ein horiznatales Drop-Down-Menü gebaut und jetzt scheiterts wohl noch am TS.
So soll es aussehen

```html
 Menüpunkt1  |   Menüpunk2 | ...
 unterpunkt1       ...
   unterpunkt1.1     ...
   unterpunkt1.2     ...
   unterpunkt1.3   ...
 unterpunkt2       ...
   ...
```

Kann mir jemand sagen, wie ich die zweite Ebene, also unterpunkt1.3 etc., unter z.B. Unterpunkt1 bekomme?

Das ist mein TS:

```typoscript
page.headerData.100 = TEXT
page.headerData.100.value = script type="text/javascript" src="fileadmin/templates/main_menu.js"></script
page.headerData.100.wrap = <|>
page.includeCSS.file1000 = fileadmin/templates/main_menu.css
temp.main_menu = HMENU
temp.main_menu.entryLevel = 0
temp.main_menu.1 = TMENU
temp.main_menu.1 {
  expAll = 1
  wrap = <ul id="nav"> | </ul>
  NO = 1
  NO.allWrap = <li>|</li>
  IFSUB = 1
  IFSUB.wrapItemAndSub = <li>|</li>
  ACTIFSUB < .IFSUB
}
temp.main_menu.2 < temp.main_menu.1  
temp.main_menu.2 {
   wrapItemAndSub = <li>|</li>
}
lib.mainMenu < temp.main_menu
```

CSS sieht so aus:

```html
 /* 1. Level */
#nav, #nav UL {
    padding: 0;
    margin: 0;
    list-style: none;
    z-index:1;
}
#nav LI {
    float: left;
    padding:2px 15px 3px 15px;
    border-top: 3px solid #E5E6E0;
    border-bottom: 2px solid #E5E6E0;
    background: url('item-seperator-menu.gif')  no-repeat 0px 4px;
}

#nav LI.first {
    background-image: none;
}
#nav LI.last { }
#nav LI A {
    display: block;
    color: #7B7C78;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: bold;
}
#nav LI:hover , #nav LI.sfhover {
    border-top-color: #E5E6E0;
    border-bottom-color: #E5E6E0;
}
#nav LI.act {
    border-top-color: #E5E6E0;
    border-bottom-color: #E5E6E0;
}
#nav LI.act A {
    color: #3E3F3B;
    
}

/* 2. Level */
#nav LI UL {
    position: absolute;
    width: 20em;
    left: -999em;
    margin: 5px 0 0 -21px;
}
#nav li ul li.header a{
    font-weight: bold;
}
HTML>BODY #nav LI UL {
    margin-left: -15px;
}
/* verschiebe Liste im IE nach links */
* HTML #nav LI UL {
    margin-left: -15px;
}
#nav LI UL LI {
    width: 15em;
    background: #E5E6E0;
    border-width: 0 1px 0px 1px;
    padding: 0 14px 0 14px;
}
#nav LI:hover UL LI A, #nav LI.sfhover UL LI A {
    text-transform: none;
    letter-spacing: normal;
    font-weight: normal;
    font-size: 11px;
    width: 99%;
    padding: 2px;
    border-right:none;
}
#nav LI UL LI:hover, #nav LI UL LI.sfhover {
    background: #7B7C78 url('') no-repeat 6px 9px;
}
#nav LI UL LI:hover a, #nav LI UL LI.sfhover a {
    color:#FFF;
}
#nav LI UL LI.act2 {
    background: #7B7C78 url('') no-repeat 6px 9px;
}
#nav LI UL LI.act2 A {
    color:#FFF;
}
#nav LI:hover UL, #nav LI.sfhover UL {
    left: auto;
}
#nav A {
    text-decoration: none;
}
#nav A:hover {
    text-decoration: none;
    color:#3E3F3B;
}
```

---

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