---
title: "CSS Menü"
url: "https://www.typo3.net/d/43641-css-menue"
source: "typo3.net"
tags: ["TYPO3","Menüs","Frage"]
created: "2006-05-24"
last_reply: "2008-04-26"
replies: 38
solved: false
page: 1
pages: 1
lang: "de"
---

# CSS Menü

TYPO3 › Menüs · 38 Antworten · gestartet 2006-05-24

## Eröffnungsbeitrag

**littlejoe** · 2006-05-24 · [Beitrag #1](https://www.typo3.net/d/43641-css-menue/1)

Hallo zusammen,

ich versuche grade folgendes Menü in typo3 umzusetzten:

<http://www.cssplay.co.uk/menus/final_drop.html>

Bisher hat auch alles funktioniert bis auf 1 Problem für die Funktion im IE:

Der HTML Code muß folgendermaßen lauten, ich bekomme aber das von mir !!!! markierte </a>-Tag nicht aus dem Code. Dieses ist zu viel.

<div class="menu">

<ul>
<li><a href="#">Level 1 a</a></li>
<li><a class="drop" href="#">Level 1 b</a>!!!!
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->

<table><tr><td>

         <ul>
         <li><a href="#">Level 2 a</a></li>
         <li><a href="#">Level 2 b</a></li>
         <li><a class="drop" href="#">Level 2 c</a>!!!!

             <!--[if IE 7]><!--></a><!--<![endif]-->
             <table><tr><td>

                 <ul>
                  <li><a href="#">Level 3 a</a></li>
                  <li><a href="#">Level 3 b</a></li>
                  <li><a href="#">Level 3 c</a></li>
                 </ul>

             </td></tr></table>

             <!--[if lte IE 6]></a><![endif]-->

</li>

         <li><a href="#">Level 2 d</a></li>
         <li><a href="#">Level 2 e</a></li>
        </ul>

</td></tr></table>
<!--[if lte IE 6]></a><![endif]-->
</li>
</ul>
</div>
-----------------------------------------------------------------------------------------------------------

Das Typoscript sieht bis dato so aus:

```typoscript
page.10.subparts.menu = HMENU  
page.10.subparts.menu {

      special = directory
      special.value = 458
      wrap = <h6>Navigation Produkte:</h6> |

       1 = TMENU
       1 {
           expAll = 1
           wrap = <ul>|</ul></td></tr></table> <!--[if lte IE 6]></a><![endif]-->
           noBlur = 1
           NO = 1
           NO.wrapItemAndSub = <li>|</li>
           IFSUB = 1
           IFSUB {
                  wrapItemAndSub = <li>|</li>
                  ATagParams = class=drop
                  linkWrap = |<!--[if IE 7]><!--></a><!--<![endif]--> <table><tr><td>         
                  }
                  ACTIFSUB < .IFSUB
           }
           2 < .1
           2.wrap = <ul>|</ul></td></tr></table> <!--[if lte IE 6]></a><![endif]--> 
           3 < .2
           4 < .2
         }
```

## Antworten

### [#2](https://www.typo3.net/d/43641-css-menue/2) · just2b · 2006-05-24

wo is was rot markiert?

### [#3](https://www.typo3.net/d/43641-css-menue/3) · littlejoe · 2006-05-24

sorry, das mit dem rot hatte nicht hingehauen, jetzt hab ich s mit !!! markiert.

### [#4](https://www.typo3.net/d/43641-css-menue/4) · littlejoe · 2006-06-01

Hier nun das fertige TypoScript für das CSS Menu "THE ULTIMATE CSS ONLY DROPDOWN MENU" (<http://www.cssplay.co.uk/menus/final_drop.html>).

CSS und HTML File kann vom angegebenen Link heruntergeladen werden.

```typoscript
page.10.subparts.pmenu = HMENU  
page.10.subparts.pmenu {
special = directory
special.value = 458 # Gebe hier an wo das Menü starten soll
wrap = <h6>Navigation Produkte:</h6> |

1 = TMENU
1 {
expAll = 1
wrap = <ul>|</ul></td></tr></table> <!--[if lte IE 6]></a><![endif]--> 
noBlur = 1
NO = 1
NO.wrapItemAndSub = <li>|</li>

IFSUB = 1
IFSUB {
allWrap.dataWrap = <li><a class="drop" href="index.php?id={field:uid}">{field:title}<!--[if IE 7]><!--></a><!--<![endif]--> <table><tr><td>
doNotShowLink = 1   
}
ACTIFSUB < .IFSUB
}
2 < .1	
3 < .2
4 < .3
5 < .4
6 < .5 
# Falls mehr Ebenen vorhanden sind Liste ergänzen.
}
```

Wünsche viel Spaß damit!

### [#5](https://www.typo3.net/d/43641-css-menue/5) · littlejoe · 2006-06-12

Achtung Codeschnipsel nicht vergessen:

<!--###DOCUMENT_HEADER###-->
<link rel="stylesheet" type="text/css" href="css/menu.css" />

<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="css/menu_ie.css" />
<![endif]-->

<!--###DOCUMENT_HEADER###-->

.. und auch beide css Dateien herunterladen.
--------

Bei einem direkt darunter befindlichen Flash sollte dieses einen transparentem "Background" haben und das Div #Menu kann bei Überlagerung anderer Div-Container mit #menu {z-index:100;} hervorgehoben werden.

### [#6](https://www.typo3.net/d/43641-css-menue/6) · littlejoe · 2006-06-29

Ich wurde gebeten den ganzen Code komplett nochmal zur Verfügung zu stellen
Das Menü funktioniert bei mir einwandfrei im IE und Firefox, Opera ... ich kann die Seite momentan nur noch posten, weil sie noch nicht online steht:

HTML Code:

```html
<!--###DOCUMENT_HEADER###-->
<link rel="stylesheet" type="text/css" href="css/pmenu.css" />

<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="css/pmenu_ie.css" />
<![endif]-->
<!--###DOCUMENT_HEADER###-->

<!-- ###DOCUMENT_BODY### -->
<div id="pmenu"> ###pmenu###</div>
<!-- ###DOCUMENT_BODY### ENDE -->
```

CSS Datei (pmenu.css:

```html
 /* common styling */
#pmenu 			{
				display:block; 
				position:relative; 
				z-index:200;
				background:#797979;	
				height:1.9em; 
				}

#pmenu ul 			{
				padding:0; 
				margin:0;
				}

#pmenu ul li 			{
				float:left;
				position:relative;
				background-image:none;
				margin:0;
				padding:0;
				}

#pmenu ul li a, #pmenu ul li a:visited {
				display:block; 
				text-decoration:none; 
				font-weight:bold;
				color:#FFF; 
				width:99px; 
				height:1.9em; 
				background:#797979; 
				border:1px solid #fff; 
				border-width:0 1px 0 0; 
				padding-left:15px; 
				line-height:1.8em;
				}

* html #pmenu ul li a, #pmenu ul li a:visited {
				width:115px;
				w\idth:99px;
				}

#pmenu ul li ul 		{
				display: none;
				}

table 				{
				margin:-1px; 
				border-collapse:collapse;
				font-size:1em;
				}

/* specific to non IE browsers */
#pmenu ul li:hover a 	{
				color:#fff; 
				background:#6A0000;
				}

#pmenu ul li:hover ul 	{
				display:block; 
				position:absolute; 
				top:1.8em;
				margin-top:1px;
				left:-1px; 
				border-bottom:1px;
				width:210px;
				}

#pmenu ul li:hover ul li ul {
				display: none;
				}

#pmenu ul li:hover ul li a {
				margin-bottom:-1px;
				display:block; 
				background:transparent  url(../images/opaque-no.png);
				height:auto; 
				font-size:1em;
				line-height:1.2em; 
				padding:5px 0 5px 14px; 
				width:195px;
				border-width:1px 1px 1px; 0; 
				}
#pmenu ul li:hover ul li a.drop {
				background:transparent  url(../images/opaque-sub.png);
				background-position:bottom;
				}

#pmenu ul li:hover ul li a:hover {
				background:transparent  url(../images/opaque-ro.png); 
				color:#000;
				}
#pmenu ul li:hover ul li:hover ul {
				display:block; 
				position:absolute; 
				left:210px; 
				top:0;
				width:210px;
				}

#pmenu ul li:hover ul li:hover ul.left {
				/*left:-200px;*/
				}
```

CSS-Datei für IE (pmenu_ie.css)

```html
#pmenu ul li a:hover 	{
				color:#fff; 
				background:#6A0000;
				}
#pmenu ul li a:hover ul 	{
				display:block; 
				position:absolute; 
				top:1.8em;
				margin-top:1px;
				left:-1px; 
				border-bottom:1px solid #fff;
				width:210px;
				}
#pmenu ul li a:hover ul li a {
				margin-bottom:-1px;
				display:block; 
				background:transparent  url(../images/opaque-no.png);
				filter:Alpha(opacity=85, finishopacity=85, style=3);
				height:auto;
				font-size:1em;
				line-height: 1.2em;
				padding:5px 0 5px 14px; 
				width:195px;
				border-width:1px;

				}
#pmenu ul li a:hover ul li a.drop {
				background-position:bottom;
				background:transparent  url(../images/opaque-sub.png) bottom;
				filter:Alpha(opacity=85, finishopacity=85, style=3);
				}
#pmenu ul li a:hover ul li a ul {
				visibility:hidden; 
				position:absolute; 
				height:0; 
				width:0;
				}

#pmenu ul li a:hover ul li a:hover {
				color: Black;
				background:transparent  url(../images/opaque-ro.png);
				filter:Alpha(opacity=85, finishopacity=85, style=3);
				}

#pmenu ul li a:hover ul li a:hover ul {
				visibility:visible; 
				display:block; 
				position:absolute; 
				left:210px; 
				top:0;
				width:210px;
				}

#pmenu ul li a:hover ul li a:hover ul.left {
/*left:-150px;*/
}
```

TS Code:

```typoscript
page.10.subparts.pmenu = HMENU 
page.10.subparts.pmenu {
special = directory
special.value = 458 # Gebe hier an wo das Menü starten soll
wrap = <h6>Navigation Produkte:</h6> |

1 = TMENU
1 {
expAll = 1
wrap = <ul>|</ul></td></tr></table> <!--[if lte IE 6]></a><![endif]-->
noBlur = 1
NO = 1
NO.wrapItemAndSub = <li>|</li>

IFSUB = 1
IFSUB {
allWrap.dataWrap = <li><a class="drop" href="index.php?id={field:uid}">{field:title}<!--[if IE 7]><!--></a><!--<![endif]--> <table><tr><td>
doNotShowLink = 1   
}
ACTIFSUB < .IFSUB
}
2 < .1 
3 < .2
4 < .3
5 < .4
6 < .5
# Falls mehr Ebenen vorhanden sind Liste ergänzen.
}
```

### [#7](https://www.typo3.net/d/43641-css-menue/7) · cuca · 2006-07-11

Hallo,

bin typo3 Newbie und möchte gerne wissen was litteljoe mit

> #
> special.value = 458 # Gebe hier an wo das Menü starten soll

meint?
458 = page id ?

Bekomme das noch nicht ganz hin.

<http://format-digital.de/test/2-Spalten-ohne-Menue.51.0.html>

### [#8](https://www.typo3.net/d/43641-css-menue/8) · littlejoe · 2006-08-18

Wenn das Menü nicht bei id 1 beginnen soll sondern an einem bestimmten Punkt vom Seitenbaum gibt man das an dieser Stelle an (ID der Page bei der die Navigationsstruktur starten soll).

### [#9](https://www.typo3.net/d/43641-css-menue/9) · littlejoe · 2006-08-18

Die fertige Website mit dem css-Menü ist jetzt online: <http://www.seeburger.de>

### [#10](https://www.typo3.net/d/43641-css-menue/10) · TakaTuka · 2006-08-18

Hi littlejoe,

zunächst mal Danke für die Inspiration mit dem Menü von cssplay und deiner Umsetzung in typo3. Ich habe erst vor ca 6 Wochen mit T3 angefangen und habe ein Frage zur Weitergabe der Seiten-ID (field:uid) an dieser Stelle deines Scripts:

```typoscript
IFSUB {
allWrap.dataWrap = <li><a class="drop" href="index.php?id={field:uid}">{field:title}<!--[if IE 7]><!--></a><!--<![endif]--> <table><tr><td>
doNotShowLink = 1   
}
```

Ich benutze auf meiner Testseite RealURL was auch soweit funktioniert, jedoch gibt er mir in deinem Menü in der Adresszeile nur den link mit "...id=xx" aus, ist soweit auch klar da ich ja sage das er die "uid" nutzen soll.
Wie mache ich jetzt aber über TypoScript meiner Seite klar, dass sie auch an dieser Stelle (href="index.php?id={field:uid}) RealUrL oder statische URLs nutzt und übergibt?

Danke Gruß
TakaTuka

### [#11](https://www.typo3.net/d/43641-css-menue/11) · ArminB · 2006-08-19

Guten Morgen,

ich stelle hier mein TS auch mal rein.

Der von littlejoe ist nicht valide (Wobei man streiten kann, ob der erzeugte Quelltext eh valide sein kann, tabellen in a-tags sind ja nicht konform) zuminmdest wird valider Quelltext vorgetäuscht.. :D

```typoscript
temp.css_menu = HMENU
temp.css_menu {
	
	special = directory
	special.value = 8
 	wrap = <div class="menu"> | </div>
	# Hauptmenue
	1 = TMENU
	1 {
	    wrap = <ul> | </ul>
		expAll = 1
		
		NO.ATagTitle.field = subtitle//title
		NO.wrapItemAndSub = <li> | </li> 
		
		
      	IFSUB = 1
		IFSUB {
			wrapItemAndSub = <li> | </li>
			allWrap = | <!--<![endif]-->
			linkWrap = |<!--[if IE 7]><!-->
   			ATagBeforeWrap = 1
		}
	}
	
	2 = TMENU
	2 {
		wrap = <table><tr><td><ul> | </ul></td></tr></table><!--[if lte IE 6]></a><![endif]-->
		expAll = 1
		
		NO.ATagTitle.field = subtitle//title
		NO.wrapItemAndSub = <li> | </li> 
		
		IFSUB = 1
		IFSUB {
			wrapItemAndSub = <li> | </li>
			allWrap = | <!--<![endif]-->
			linkWrap = |<!--[if IE 7]><!-->
   			ATagBeforeWrap = 1
			ATagParams = class=drop
		}
	
	}
	
	3 < .2
	4 < .2
}
```

@TakaTuka
In meiner Lösung werden Links rchtig dargestellt. Links sollte in TS auch mit typolink erzeugt werden.

Armin

### [#12](https://www.typo3.net/d/43641-css-menue/12) · darkdesire · 2006-08-19

Vielen Dank an Armin

Dies ist wirklich ne funktionierende Lösung endlich, wie lange hab ich versucht, gesucht, rumgebastelt an diesem teil

Danke Danke  :p

### [#13](https://www.typo3.net/d/43641-css-menue/13) · TakaTuka · 2006-08-23

Hallo Armin,

vielen Dank für dein TS, konnte es mir leider erst jetzt anschauen. Sieht super aus und bringt mich endlich mal ein Schritt weiter. :p

Viele Grüße
TakaTuka

### [#14](https://www.typo3.net/d/43641-css-menue/14) · biz1968 · 2006-10-22

Hallo Armin,

wie lässt sich das Menü so erweitern, daß die aktiven Punkte des horizontalen Menüs in einer definierten Farbe dargestellt werden ?

Grüsse Ralf

### [#15](https://www.typo3.net/d/43641-css-menue/15) · just2b · 2006-10-22

> **biz1968 schrieb:**
>
> Hallo Armin,
>
> wie lässt sich das Menü so erweitern, daß die aktiven Punkte des horizontalen Menüs in einer definierten Farbe dargestellt werden ?
>
> Grüsse Ralf

Hallo, hier hilft der Zustand ACT

georg

### [#16](https://www.typo3.net/d/43641-css-menue/16) · biz1968 · 2006-10-23

Hallo Georg,
das ist schon klar,

im Firefox funktioniert's auch,
aber der IE (wie immer)
 #angry#

<http://212.82.35.226/projekte/dfgb/preziehs_home.html?&L=0>

```typoscript
temp.nav = HMENU
temp.nav {
    special = directory
    special.value = 367
    excludeUidList = 
    wrap = |



1 = TMENU
1 {
    expAll = 1
    wrap = <ul>|</ul></td></tr></table> <!--[if lte IE 6]></a><![endif]-->
    noBlur = 1
    NO = 1
    NO.wrapItemAndSub = <li>|</li>



    IFSUB = 1
    IFSUB {
             allWrap.dataWrap = <li><a class="sub" href="{field:uid}.html?&L=0">{field:title}<!--[if IE 7]><!--></a><!--<![endif]--> <table><tr><td>
             doNotShowLink = 1  
           }

    ACTIFSUB = 1
    ACTIFSUB {
             allWrap.dataWrap = <li><a class="actifsub" href="{field:uid}.html?&L=0">{field:title}<!--[if IE 7]><!--></a><!--<![endif]--> <table><tr><td>
             doNotShowLink = 1  
           }

    ACT = 1
    ACT {
             allWrap.dataWrap = <li><a class="act" href="{field:uid}.html?&L=0">{field:title}</a> 
             doNotShowLink = 1  
           }

    }


2 < .1 
3 < .2
4 < .3
5 < .4
6 < .5
}
```

/* common styling */
#nav    {
display:block;
font-size: 73%;

margin: 0;
padding: 0;

padding-left: 80px;

z-index: 9999;

}

#nav ul {
padding:0;
margin:0;
}

#nav ul li {
float:left;
position:relative;
margin:0;
padding:0;
margin-right: 10px;
}

#nav ul li a,
#nav ul li a:visited {
display:block;
text-decoration:none;
font-weight:bolder;
width:120px;
height:30px;
color:#e28500;
background-color: #fbfafa;
border-left:10px solid #e28500;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
line-height:1em;
}

html #nav ul li a,
#nav ul li a:visited {
width:131px;
w\idth:115px;

}

#nav ul li ul {
display: none;
}

table  {
border-collapse:collapse;
font-size:1em;
 }

/* specific to non IE browsers */

html #nav ul li a.act:link,
html #nav ul li a.act:visited  {
background-color: #e28500;
color: #ffffff;
border-left:10px solid #ffffff;
}

#nav ul li a.actifsub,
#nav ul li:link a.actifsub,
#nav ul li:hover a.actifsub,
#nav ul li:visited a.actifsub   {
background-color: #e28500;
color: #ffffff;
border-left:10px solid #ffffff;
}

#nav ul li:hover a    {
background-color: #e28500;
color: #ffffff;
border-left:10px solid #ffffff;

}

/******************************/
/************* NAV EBENE 1**********/
/******************************/

#nav ul li:hover ul   {
display:block;
position:absolute;
top:35px;
left:0px;
width:170px;
}

#nav ul li:hover ul li ul {
 display: none;  /* triggering durch hover*/
}

#nav ul li:hover ul li a {
display:block;
height:auto;
line-height:1em;
padding:5px 0 5px 5px;
width:170px;
border-left:10px solid #e28500;
color: #e28500;
background-color: #fbfafa;
}

#nav ul li:hover ul li a:hover {
color: #ffffff;
background-color: #e28500;
border-left:10px solid #ffffff;

}

/******************************/
/************* NAV EBENE 2**********/
/******************************/

#nav ul li:hover ul li:hover ul {
display:block;
position:absolute;
left:185px;
top:0;
width:170px;
}

Grüsse Ralf

### [#17](https://www.typo3.net/d/43641-css-menue/17) · ArminB · 2006-10-23

moin Ralf,

wenn ich das auf den esten Blick sehe zerhaust du den ganzen Quelltext. Es fehlt wrapItemAndSub etc.pp

Du musst nur bei meinem TS oben mit einfügen:

```typoscript
  ACT < .NO
  ACT = 1
  ACT.ATagParams = class=drop
  
  ACTIFSUB < .IFSUB
  ACTIFSUB.ATagParams = class=drop
```

Evtl. Klassennamen anpassen und halt noch das passende CSS anlegen

Armin

### [#18](https://www.typo3.net/d/43641-css-menue/18) · biz1968 · 2006-10-23

Hallo Armin,

habe jetzt Dein TS Scripting übernommen und den Zusatzpart eingefügt

```typoscript
temp.nav = HMENU
temp.nav {
        
        special = directory
        special.value = 6634
        excludeUidList = 6649,6648
        wrap = <div class="nav"> | </div>
        # Hauptmenue
        1 = TMENU
        1 {
            wrap = <ul> | </ul>
                expAll = 1
                
                NO.ATagTitle.field = subtitle//title
                NO.wrapItemAndSub = <li> | </li> 
                
                
        IFSUB = 1
                IFSUB {
                        wrapItemAndSub = <li> | </li>
                        allWrap = | <!--<![endif]-->
                        linkWrap = |<!--[if IE 7]><!-->
                        ATagBeforeWrap = 1
                }

        ACT < .NO
        ACT = 1
        ACT.ATagParams = class=dropact
  
       ACTIFSUB < .IFSUB
       ACTIFSUB.ATagParams = class=dropact

        }
        
        2 = TMENU
        2 {
                wrap = <table><tr><td><ul> | </ul></td></tr></table><!--[if lte IE 6]></a><![endif]-->
                expAll = 1
                
                NO.ATagTitle.field = subtitle//title
                NO.wrapItemAndSub = <li> | </li> 
                
                IFSUB = 1
                IFSUB {
                        wrapItemAndSub = <li> | </li>
                        allWrap = | <!--<![endif]-->
                        linkWrap = |<!--[if IE 7]><!-->
                  ATagBeforeWrap = 1
                  ATagParams = class=drop
                }

        ACT < .NO
        ACT = 1
        ACT.ATagParams = class=dropact
  
       ACTIFSUB < .IFSUB
       ACTIFSUB.ATagParams = class=dropact

        
        }
        
        3 < .2
        4 < .2
}
```

im standard CSS zusätzlich

#nav ul li a.dropact    {
background-color: #003a77;
color: #ffffff;
}

#nav ul li:hover ul li a.dropact {
background-color: #003a77;
color: #ffffff;
}

funktioniert in Firefox ganz wunderbar

doch was kommt ins CSS für die Hauptnavigation im IE rein ?
Dort funktionierts nämlich nicht !

Das bischen CSS Anpassung ist mein Problem

#angry#

Grüsse Ralf

### [#19](https://www.typo3.net/d/43641-css-menue/19) · mlehner · 2007-04-25

Hallo Leute!

Ich bin beim Thema Templates und dropdown Menu absoluter Neuling und habe trotz der vielen Beispiele noch keines zum Laufen gebracht.

Auch der Beitrag von littlejoe auf Seite1 mit dem kompletten Code funktioniert nicht und ich kann mir auch nicht vorstellen dass das jemals läuft, denn:
Das Beispiel für den HTML-Code ist ja angegeben und ich geh mal davon aus, dass es sich dabei um das Template handelt. Dieses Template wird aber nirgends im Code eingebunden, wie soll das also funktionieren?

Gibt es irgendwo ein wirklich komplettes Beispiel, dass auch jeder einbinden kann?

Ich habe keine Lust mich wochenlang mit Templates und Dropdown zu beschäftigen, denn wenn es einmal eingerichtet ist wird es nie wieder geändert!

Viele Grüsse

### [#20](https://www.typo3.net/d/43641-css-menue/20) · elfe111 · 2007-05-13

Hallo mlehner,

das kann schon funktionieren wenn man weiß wie Template und Stylesheet eingebunden werden - hier wurde nur das TS für das entsprechende Menü selbst besprochen und gepostet. Anpassungen sind natürlich nötig wenn es auf Deiner oder einer anderen Seite laufen soll.

Eine Lösung die für alle passt gibt es nicht wirklich und nicht alle hier im Forum ändern ihr Menü nie mehr oder erstellen nur eine einzige Homepage.
Und so ist es sicher doch gut wenn man sich ein bischen mehr damit beschäftigt - Fragen die dann aufkommen können hier im Forum beantwortet werden - wie kann man nun Dir helfen?

Gruß
elfe111

### [#21](https://www.typo3.net/d/43641-css-menue/21) · mlehner · 2007-05-15

Hallo Elfe,
erstmal vielen Dank für Deine Antwort.

Ich versuche gerade unsere statische Firmenhomepage auf Typo3 umzustellen.
Typo3 läuft soweit schon, die Menüstruktur ist auch schon angelegt.

Jetzt benötige ich noch ein Dropdown-Menü ala <http://www.seeburger.de/> (nur das obere waagrechte), das meine Menustruktur aus Typo3 abbildet.
Zusätzlich noch ein einfaches blanko Template,also keine Hintergrundbilder oder ähnliches zum Füllen mit Daten auch aus Typo3.
Ich habe schon so viele Beispiele gesehen, leider hat noch keines davon funktioniert.

Gibt es denn keine Komplettbeispiele, die man sich herunterladen kann und dann an seine Bedürfnisse anpassen kann?

Das Beispiel von littlejoe vom 29.6. scheint ja nicht vollständig zu sein, zumindest läuft es bei mir nicht.
Ich habe alle Dateien herstellt und hochgeladen, das TS-Script habe ich auch eingebunden. Was fehlt denn noch?

Vielen Dank schon mal für Deine Hilfe.

Gruß

### [#22](https://www.typo3.net/d/43641-css-menue/22) · allej · 2007-05-16

Guten Morgen liebe Typo3-Gemeinde

Erstmal herzlichen Dank an littlejoe und ArminB für die hervorragende Arbeit (*Verneigung).
Wenn ich nun das Layermenu mit Firefox betrachte (TS-Script von ArminB) werden mir im Menü (Haupt- und Untermenü) vor den einzelnen Einträgen Punkte dargestellt. Kann mir jemand erläutern warum die Punkte nur im Firefox und nicht im IE dargestellt werden und wie ich diese Punkte weg bekomme?
Für die Hilfe danke ich im voraus.

Gruss allej

### [#23](https://www.typo3.net/d/43641-css-menue/23) · mlehner · 2007-05-16

Hallo Leute!

Ich hab das ganze jetzt noch einmal neu erstellt und eingebunden, leider ohne Erfolg, es erscheint immer die Meldung dass die Seite nicht konfiguriert ist.

Wo liegt denn der Fehler?

Bitte um baldige Hilfe.

### [#24](https://www.typo3.net/d/43641-css-menue/24) · ArminB · 2007-05-16

moin allej,

mit Orginal CSS sind im FF keine Punkte zu sehen, <http://typo3.intervation.de/snippets/menues/drop-down-menu.html> Poste eine URL damit man es sich ansehen kann.

moin mlehner,

das suckerfish-dropdowns, <http://typo3.intervation.de/snippets/menues/suckerfish-dropdowns.html> lässt sich waagerecht darstellen.

Armin

### [#25](https://www.typo3.net/d/43641-css-menue/25) · allej · 2007-05-18

Guten Morgen ArminB und Typo3-Gemeinde
@ArminB:
Vielen Dank für die rasche Antwort und den Hyplerlink. Genau das was ich suche.

Habe jetzt etwa 18 Std. versucht das Scrpit einzusetzten. Ohne Erfolg, dafür Augenringe und x Tassen Kaffee intus (Vorrat aufgebraucht). Die Homepage betreibe ich zur Zeit local. Ich habe keine Ahnung was ich falsch mache. Mir leuchtet auch die Zeile 57 "lib.demo_ts < temp.css_menu" nicht ein.
Jetzt wird mir das Verzeichnis als Baum vertikal dargestellt. Ich poste mal meine Scripts. Vieleicht siehst Du/Ihr meinen/meine Fehler. Bin für jede Hilfe dankbar (Auch meine Frau  ;) )

```typoscript
page = PAGE
page {
   typeNum = 0
   includeCSS.layout_nav01 = fileadmin/css/layout_nav01.css   
   
   #Designvorlage
   10 = TEMPLATE
   10.template = FILE
   10.template.file = fileadmin/template/layout_nav01.html
   10.workOnSubpart = DOKUMENT
   
   10.marks {
      MENUE01 = HMENU
      MENUE01 {
         special = directory         
         special.value = 41    
         entryLevel = 1
         wrap = <div class="menu"> | </div>
         
         # Hauptmenue
         1 = TMENU
         1 {
            wrap = <ul> | </ul>
            expAll = 1
            NO.ATagTitle.field = subtitle//title
            NO.wrapItemAndSub = <li> | </li>
            NO.stdWrap.prepend = COA
            NO.stdWrap.prepend.10.wrap = ~&nbsp; |
            IFSUB = 1
            IFSUB {
               wrapItemAndSub = <li> | </li>
               allWrap = | <!--<![endif]-->
               linkWrap = |<!--[if IE 7]><!-->
               ATagBeforeWrap = 1
            }
            ACT < .NO
            ACT = 1
            ACT.ATagParams = class=dropact
            ACTIFSUB < .IFSUB
            ACTIFSUB.ATagParams = class=dropact
         }
         2 = TMENU
         2 {
            wrap = <!--[if lte IE 6]><table><tr><td><![endif]--><ul> | </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
            expAll = 1
            NO.ATagTitle.field = subtitle//title
            NO.wrapItemAndSub = <li> | </li>
            IFSUB = 1
               IFSUB {
               wrapItemAndSub = <li> | </li>
               allWrap = | <!--<![endif]-->
               linkWrap = |<!--[if IE 7]><!-->
               ATagBeforeWrap = 1
               ATagParams = class=drop
            }
         }
         3 < .2
         4 < .2
      }
      lib.demo_ts < MENUE01
   }
}
```

```html
<html>
<head>
</head>

<body>
<!--###DOKUMENT###-->
<!--[if lte IE 7]><link rel="stylesheet" type="text/css" href="fileadmin/css/msie.css"><![endif]-->

<div id="head">
   <div class="pad2"></div>
   <div id="head_container">
      T I T E L
   </div><!-- end of head_container -->
</div><!-- end of head -->

<div id="klickpfad">
   ###KLICKPFAD###
</div><!-- end of klickpfad -->

<div id="left">
   <div class="pad3"></div>

   <div id="left_text">
      <br><br>
   </div><!-- end of left_text -->
</div><!-- end of left -->


<div id="content">
   <div class="pad4"></div>
   ###MENUE01###
   <div class="pad5"></div>
</div><!-- end of content -->

<!--###DOKUMENT### ende -->
</body>
</html>
```

- html {
     height: 100%;
     padding: 0;
     margin: 0;
     border: 0;
     font-size: 12px;
     font-family: verdana, tahoma, arial, sans-serif;
     background:#ffffff  }

  body {
     height:100%;
     padding:0;
     margin:0;
     border:0; }

  #left {
     position: fixed;
     left: 0;
     top: 0;
     height: 100%;
     width: 200px;
     background: #000099;
     font-family: verdana, tahoma, arial, sans-serif;
     color: #FFFFFF;
     z-index: 5; }

  #klickpfad {
     position: fixed;
     top: 80px;
     left: 210px;
     right: 230px;
     padding: 5px 5px 10px 0;
     background-color: #FFFFFF;
     text-align: left;
     font-size: 12px;
     font-weight: bold;
     color: #989898;
     z-index: 4;}

  #content {
     position: relative;
     height: 100%;
     padding-left: 210px;
     padding-right: 250px;
     display: block;
     overflow: auto;
     text-align: justify;
     line-height: 1.5;
     z-index: 3; }

  #pad1 {display: block; width: 18px; height: 100px; float: left;}
  .pad2 {display: block; height: 10px;}
  .pad3 {display: block; height: 80px;}
  .pad4 {display: block; height: 100px;}
  .pad5 {display: block; height: 45px;}

  demo .menu {
  width:750px;
  font-size:0.85em;
  position:relative;
  z-index:100;
  }
  /* remove all the bullets, borders and padding from the default list styling */
  .demo .menu ul {
  padding:0;
  margin:0;
  list-style-type:none;
  }
  .demo .menu ul ul {
  width:150px;
  }
  /* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
  .demo .menu li {
  float:left;
  width:150px;
  position:relative;
  }
  /* style the links for the top level */
  .demo .menu a, .demo .menu a:visited {
  display:block;
  font-size:11px;
  text-decoration:none;
  color:#fff;
  width:139px;
  height:30px;
  border:1px solid #fff;
  border-width:1px 1px 0 0;
  background:#758279;
  padding-left:10px;
  line-height:29px;
  }
  /* a hack so that IE5.5 faulty box model is corrected */
  * html .demo .menu a, * html .demo .menu a:visited {
  width:150px;
  w\idth:139px;
  }

  /* style the second level background */
  .demo .menu ul ul a.drop, .demo .menu ul ul a.drop:visited {
  background:#d4d8bd url(../../graphics/drop.gif) bottom right no-repeat;

  }
  /* style the second level hover */
  .demo .menu ul ul a.drop:hover{
  background:#c9ba65 url(../../graphics/drop.gif) bottom right no-repeat;
  }
  .demo .menu ul ul :hover > a.drop {
  background:#c9ba65 url(../../graphics/drop.gif) bottom right no-repeat;
  }
  /* style the third level background */
  .demo .menu ul ul ul a, .demo .menu ul ul ul a:visited {
  background:#e2dfa8;
  }
  /* style the third level hover */
  .demo .menu ul ul ul a:hover {
  background:#b2ab9b;
  }

  /* hide the sub levels and give them a positon absolute so that they take up no room */
  .demo .menu ul ul {
  visibility:hidden;
  position:absolute;
  height:0;
  top:31px;
  left:0;
  width:150px;
  }
  /* another hack for IE5.5 */
  * html .demo .menu ul ul {
  top:30px;
  t\op:31px;
  }

  /* position the third level flyout menu */
  .demo .menu ul ul ul{
  left:150px;
  top:0;
  width:150px;
  }
  /* position the third level flyout menu for a left flyout */
  .demo .menu ul ul ul.left {
  left:-150px;
  }

  /* style the table so that it takes no ppart in the layout - required for IE to work */
  .demo .menu table {position:absolute; top:0; left:0;}

  /* style the second level links */
  .demo .menu ul ul a, .demo .menu ul ul a:visited {
  background:#d4d8bd;
  color:#000;
  height:auto;
  line-height:1em;
  padding:5px 10px;
  width:129px
  /* yet another hack for IE5.5 */
  }
  * html .demo .menu ul ul a{
  width:150px;
  w\idth:129px;
  }

  /* style the top level hover */
  .demo .menu a:hover, .demo .menu ul ul a:hover{
  color:#fff;
  background:#949e7c;
  }
  .demo .menu :hover > a, .demo .menu ul ul :hover > a {
  color:#fff;
  background:#949e7c;
  }

  /* make the second level visible when hover on first level list OR link */
  .demo .menu ul li:hover ul,
  .demo .menu ul a:hover ul{
  visibility:visible;
  }
  /* keep the third level hidden when you hover on first level list OR link */
  .demo .menu ul :hover ul ul{
  visibility:hidden;
  }

  /* make the third level visible when you hover over second level list OR link */
  .demo .menu ul :hover ul :hover ul{
  visibility:visible;
  }

### [#26](https://www.typo3.net/d/43641-css-menue/26) · allej · 2007-05-18

Nochmals gute Morgen

@mlehner
Hast Du mal nachgesehen, ob Du auf dem Weg zu der Seite ein leeres TS-Feld hast? Ist mir mal passiert. Löschen und gut ist.

Gruss allej

### [#27](https://www.typo3.net/d/43641-css-menue/27) · ArminB · 2007-05-18

Guten Morgenn allej,

> mache. Mir leuchtet auch die Zeile 57 "lib.demo_ts < temp.css_menu" nicht ein.

Die Zeile kopiert den Inhalt von temp.css_menu in lib.demo_ts. Wenn du dir das Orginal TS anschaust, sind alle Angaben erst in dem TLO temp.css_menue beschrieben. Das TLO lib.demo_ts ist ein Object-Pfad in TV.

Du brauchst bei deiner Art der Anwendung die Zeile nicht! Bei dir müsste es dann eh so heißen:

```typoscript
page.10.marks.MENUE01 < temp.css_demo
```

Dann kannst du die ganze Beschreibung innerhalb von page.10.marks.MENUE01 sparren.

Es gibt zwei gute Gründe so zu arbeiten:
1.) Könnte ich temp.css_demo nun an mehrere Stellen kopieren, müsste nicht über all noch mal das ganze TS schreiben
2.) Erhöht es die Übersicht, wenn ich einzelne Blöcke auslagerest. So kannst du verschiedene Aufgaben auf verschiedene Templates verteilen.

Der Grund warum dein Menü nicht richtig dargestellt wird liegt am CSS!
Du hast:

```html
<div id="content">
   <div class="pad4"></div>
   ###MENUE01###
   <div class="pad5"></div>
</div>
```

Im CSS steht aber:

```html
.demo .menu ul {
padding:0;
margin:0;
list-style-type:none;
}
```

Du musst also überall im CSS das .demo .menu an deine Umgebung anpassen, also aus ".demo .menu" wird einfach .pad4

Ich sehe schon, ich muss auf meiner Seite die Beschreibung etwas weiter ausführen.

Gruß
Armin

### [#28](https://www.typo3.net/d/43641-css-menue/28) · allej · 2007-05-18

Guten Abend ArminB
Respekt. Da werde ich mich wohl noch mit Top-Level-Objekte rumschlagen.
Das "pad4" ist nur als Abstandhalter zwischen oberem Rand und Text vorgesehen. Dies verhindern, dass der Anfang des Textes durch die Kopfleiste verdeckt wird. Wird der Text länger kann man scrollen ohne dass die Kopfleiste, das Menü oder die linke Seite weggescrollt wird. Ein kleiner "Beschiss" für den Betrachter.
Jetzt habe ich den Marker MENUE01 in die div "demo" eingepackt - und **es funktioniert**. Vielen Dank.
Leider habe ich das Problem jetzt mit dem .... IE. Wie bekomme ich die Befehlszeile für den Doctype in die Kopfzeile von index.php? Verändere ich den Doctype über "Tools/Installation/Edit files in typo3config/index.html" wird diese in der index.php nicht vollzogen. Habe bis jetzt auch keinen entsprechenden Hinweis im Forum oder Internet gefunden.
Kannst Du mir bitte weiterhelfen? Danke.

Gruss
allej

### [#29](https://www.typo3.net/d/43641-css-menue/29) · ArminB · 2007-05-18

moin,

da habe ich mich vertan.  ###MENUE01### steht ja nicht in  <div class="pad4"></div>, aber du hast es ja schon selbst erkannt.

Den doctype passt du im Tempalte - setup an, schau hier <https://docs.typo3.org/m/typo3/reference-typoscript/main/en-us/TopLevelObjects/Config.html> unter doctype.

Armin

### [#30](https://www.typo3.net/d/43641-css-menue/30) · allej · 2007-05-18

Guten Abend ArminB

Ich verneige mich nochmals vor Dir. (Jetzt wären sogar die Chinesen von meiner Verneigung beeindruckt - Stirn am Boden). Jetzt klappt es sogar mit diesem .... IE. Nächste Aufgabe - Frau beschwichtigen.
Wünsche Dir noch einen schönen Abend.

Gruss

allej

### [#31](https://www.typo3.net/d/43641-css-menue/31) · mlehner · 2007-05-22

Hallo ArminB, hallo Leute!

Vielen Dank für den suckerfish-Link, dort ist ein Dropdown-Menu ja schön erklärt.
Bei mir scheitert es aber daran, dass ich nicht weiß wie ich den ganzen Code einbinden muss. Das TS ist noch klar wohin, beim CSS und Javascript weiß ich nicht mehr wo dass hin soll.
Das CSS zum Beispiel - wird das per CSS-Befehl in TS eingefügt oder als externe CSS-Datei? Wenn extern wo muss ich das einbinden? Ins Template oder ins TS als Resoureces?
Weiterhin brauch ich ja auch noch ein Template, dass Typo3 dann mit den Menüpunkten aus meiner Baumstruktur füllt. So ein Template wird nirgends angesprochen.

Also bitte habt Gedult mit mir und sagt mir von Anfang an wo muss was hin?
Oder könnte mir einer mal ALLE benötigten Dateien schicken?

Viele Grüsse

mlehner

### [#32](https://www.typo3.net/d/43641-css-menue/32) · mlehner · 2007-06-11

Hi Leute!

Ich hab mir das ganze nochmal angesehen und angepasst; leider immer noch ohne Erfolg.

Mein TS:

page = PAGE
page.typeNum = 0
page.30 = TEMPLATE
page.30 {
template = FILE
template.file = fileadmin/templates/ahp2.html

workOnSubpart = document
subparts.sub_content.select.orderBy = sorting
subparts.content < styles.content.get
subparts.pmenu = HMENU
subparts.pmenu {
special = directory
special.value = 4
wrap = <h6>Navigation Produkte:</h6> |

1 = TMENU
1 {
expAll = 1
wrap = <ul>|</ul></td></tr></table> <!--[if lte IE 6]></a><![endif]-->
noBlur = 1
NO = 1
NO.wrapItemAndSub = <li>|</li>

IFSUB = 1
IFSUB {
allWrap.dataWrap = <li><a class="drop" href="index.php?id={field:uid}">{field:title}<!--[if IE 7]><!--></a><!--<![endif]--> <table><tr><td>
doNotShowLink = 1
}
ACTIFSUB < .IFSUB
}
2 < .1
3 < .2
4 < .3
5 < .4
6 < .5

}

im Template ahp2.html sind die entsprechenden Verweise auf pmenu.css und pmenu_ie.css, siehe auch Beispiel auf der 1. Seite.

Die Seite im Frontend ist völlig leer, auch keine Fehlermeldung.

Wo liegt der Fehler?

Gruß

Mlehner

### [#33](https://www.typo3.net/d/43641-css-menue/33) · ArminB · 2007-07-01

Hi mlehner,

ich habe mal eine Extension erstellt um das ypmenu leicht einzubinden, <http://typo3.intervation.de/extensionen/intervation/int-ypslideoutmenu.html>

Armin

### [#34](https://www.typo3.net/d/43641-css-menue/34) · Lektor · 2007-10-04

Hallo Typo3-Profis,
ich versuche mich zur Zeit auch in Typo3 einzuarbeiten und ich habe schon sehr sehr sehr viele Stunden damit verbracht, mich mit Typo3 und den Eigenarten des InternetExplorers zu beschäftigen. #angry#  So langsam möchte ich positive Ergebnisse sehen und deswegen würde ich gerne eure Hilfe in Anspruch nehmen.

Jede Internetseite brauch ein Menü und nach langem Probieren habe ich mich für die CSS Variante entschieden, da ich mich dort einfacher hineindenken kann und Änderungen schneller umsetzbar sind. Nun wollte ich das Menü vom ersten Post umsetzen und habe mich für das vertikale Menü entschieden.
<http://www.cssplay.co.uk/menus/flyout_4level.html>

Ich bin schon dicht dran und das Menü funktioniert schon fast auf dem Firefox nur der IE macht wieder was er will.
Habe schon zig Wrap-Varianten ausprobiert, aber das richtige Ergebnis habe ich noch nicht hinbekommen.

hier einfach mal die Codes (ausschnittweise)
wie es sein soll:

```php
<div class="menu">
<ul>
<li><a href="#nogo">Home</a></li>
<li><a href="#nogo">About us</a></li>
<li class="sub"><a href="#nogo">Products<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul>
	<li><a href="#nogo">Tripods</a></li>
	<li class="sub"><a href="#nogo">Cameras<!--[if IE 7]><!--></a><!--<![endif]-->

	<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul>
			<li><a href="#nogo">Compact</a></li>
			<li><a href="#nogo">SLR</a></li>
			<li class="sub"><a href="#nogo">Digital<!--[if IE 7]><!--></a><!--<![endif]-->
			<!--[if lte IE 6]><table><tr><td><![endif]-->
				<ul>
```

wie mein Code bisher generiert wird:

```php
<div class="menu">
<ul>
	<li>
	         <a href="index.php?id=84">N</a>
	</li>
	<li>
	         <a href="index.php?id=106">B</a>
	</li>
	<li class="sub">
	         <a href="index.php?id=101">P<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
	         [b]<a href="index.php?id=101" onfocus="blurLink(this);"  >P</a>    !!!doppelt!!![/b]
	                  <ul>
	                  <li>
	                           <a href="index.php?id=104">20</a>
	                  </li>
	                  </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
	<li class="sub">
	         <a href="index.php?id=85">V<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
	         <a href="index.php?id=85">V</a>
	                  <ul>
	                  <li>
	                           <a href="index.php?id=88">a</a>
	                  </li>
	                  <li>
	                           <a href="index.php?id=87">y</a>
	                  </li>
	                  <li>
	                           <a href="index.php?id=102">g</a>
	                  </li>
```

und der TS Code hierzu.

```typoscript
                  CSSMENU = HMENU
                  CSSMENU {
			 special = directory
        			 special.value = 83
        			 wrap = |
			 # Hauptmenue
        			 1 = TMENU
        			 1 {
            		 wrap = <ul> | </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
                		 expAll = 1
			 NO.ATagTitle.field = subtitle//title
			 NO.wrapItemAndSub = <li> | </li>

			 IFSUB = 1
                		 IFSUB {
                                 wrapItemAndSub =<li class="sub">|</li>
				allWrap.dataWrap = <a href="index.php?id={field:uid}">{field:title}<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->

                                 ////allWrap = <li class="sub"> | </li>
                                 ////linkWrap.dataWrap = <a href="index.php?id={field:uid}">{field:title}<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
				}
        			    }

        			 2 = TMENU
        			 2 {
                		   wrap = <ul> | </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
                		   expAll = 1
			   NO.ATagTitle.field = subtitle//title
                		   NO.wrapItemAndSub = <li> | </li>

                		   IFSUB = 1
                		   IFSUB {
                                 wrapItemAndSub =<li class="sub">|</li>
				allWrap.dataWrap = <a href="index.php?id={field:uid}">{field:title}<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->

                                 ////allWrap = <li class="sub"> | </li>
                                 ////linkWrap.dataWrap = <a href="index.php?id={field:uid}">{field:title}<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
				}
			   }

        			 3 < .2
        			 4 < .2
			}
```

Da bei mir die Beispiele nicht zufriedenstellend funktioniert haben, habe ich zig Varianten ausprobiert.
Kann mir jemand sagen, wie das richtig gewrapt wird?

Danke
Sven

### [#35](https://www.typo3.net/d/43641-css-menue/35) · ArminB · 2007-10-06

moin,

das <http://typo3.intervation.de/snippets/menues/drop-down-menu.html> sollte ja ähnlich sein, kannst ja schauen wo dein Fehler steckt.

Armin

### [#36](https://www.typo3.net/d/43641-css-menue/36) · Hille · 2007-10-08

Hallo zusammen,

habe soeben mein Test-TypoScript für das Menu unter;

<http://www.cssplay.co.uk/menus/menu_builder_flyout.html#>

fertiggestellt.
Bin noch am Rollover (natürlich per CSS) testen.

Wen es interessiert, bitte melden (PM hier im Forum).
Ich mache für Heute erst einmal Schluß. (Ist ja schon 00:50 Uhr)

Gruß
Hille

### [#37](https://www.typo3.net/d/43641-css-menue/37) · Lektor · 2007-10-09

Danke für den Link. Der hat mir wirklich geholfen. Hatte doch so einige falsch.
Jetzt funktionieren die Menüs einwandfrei auf dem IE und Firefox.

Danke
Sven

### [#38](https://www.typo3.net/d/43641-css-menue/38) · triskal · 2008-04-26

> **ArminB schrieb:**
>
> ... <http://typo3.intervation.de/snippets/menues/drop-down-menu.html> ...

hi,

sry, wenn ich diesen thread noch mal hervorkrame. ich bin dabei das im quoting angegebene menü umzusetzen. läuft auch eigentlich alles meinen vorstellungen entsprechend. jetzt versuche ich allerdings händeringend das submenü ebenfalls horizontal anzeigen zu lassen...

zum besseren verständnis vllt. mal ein link: <http://pro-sportler.org>

zu sehen ist das toplevel-menü zwischen den orangen linien. unter den topics 'angebote' und 'srsinfo' verbirgt sich jeweils ein sub-menü-level. diese unterpunkte sollen nun jedoch nicht vertikal sondern horizontal, unterhalb der zweiten orangen linie ausgerichtet werden.

ist doch sicher ne css-sache, oder? finde nur ums verrecken nicht die stelle im code die verantwortlich für die vertikale ausrichtung ist  :'(

für den ie könnte ichs so lösen, dass ich der dort verwendeten tabelle ein width mitgebe. dann klappts, ist aber keine schicke lösung. ich dachte mehr daran die li's im submenü als display:block und float:left ausrichten zu können, aber das klappt irgendwie nicht...

ist das ganze überhaupt möglich und hat vllt. jemand einen tipp?
danke und gruss, manuel

### [#39](https://www.typo3.net/d/43641-css-menue/39) · triskal · 2008-04-26

ok, ich habs.

es fehlte im untergeordneten ul-tag die width-angabe. kein wunder, dass man durch stundenlanges draufgucken keine lösung findet...

ist zwar noch nicht perfekt, aber wird schon werden.

trotzdem danke und gruss, manuel

---

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