---
title: "Listenmenü mit CSS"
url: "https://www.typo3.net/d/41090-listenmenue-mit-css"
source: "typo3.net"
tags: ["TYPO3","Menüs","Frage"]
created: "2006-04-10"
last_reply: "2006-04-10"
replies: 2
solved: false
page: 1
pages: 1
lang: "de"
---

# Listenmenü mit CSS

TYPO3 › Menüs · 2 Antworten · gestartet 2006-04-10

## Eröffnungsbeitrag

**Andimueto** · 2006-04-10 · [Beitrag #1](https://www.typo3.net/d/41090-listenmenue-mit-css/1)

habe jetzt schon sehr viel probiert ein Menü mit CSS zu gestalten. Dabei habe ich auch einige nützliche Dinge in diesem Forum gefunden. Jetzt sitze ich allerdings fest und hoffe auf eure Hilfe.

Habe im Setup mein Menü wie folgt eingerichtet:

```typoscript
menu_links = HMENU
menu_links.special = directory
menu_links.special.value=392
menu_links.entryLevel = 1
menu_links {

1 = TMENU
1.noBlur = 1
1.wrap = <ul class="ullevel1">|</ul>
1.NO = 1
1.NO.linkWrap = <li class="level_1_NO">|</li>
1.ACT = 1
1.ACT.linkWrap = <li class="level_1_ACT">|</li>
1.CUR = 1
1.CUR.linkWrap = <li class="level_1_CUR">|</li>

2 = TMENU
2.noBlur = 1
2.wrap = <ul class="ullevel2">|</ul></li>
2.NO = 1
2.NO.linkWrap = <li class="level_2_NO">|</li>
2.ACT = 1
2.ACT.linkWrap = <li class="level_2_ACT">|</li>
2.CUR = 1
2.CUR.linkWrap = <li class="level_2_CUR">|</li>

3 = TMENU
3.noBlur = 1
3.wrap = <ul class="ullevel3">|</ul></li>
3.NO = 1
3.NO.linkWrap = <li class="level_3_NO">|</li>
3.ACT = 1
3.ACT.linkWrap = <li class="level_3_ACT">|</li>
3.CUR = 1
3.CUR.linkWrap = <li class="level_3_CUR">|</li>
}
```

Nachdem die Zustände über NO ACT und CUR aber nicht sauber wiedergegeben wurden greife ich in meiner CSS-Datei jetzt mit folgendem Code zu:

```html
#menu {
	position: relative;
	top: 30px;
	left: 0px;
	width: 150px;
	height: 100%;
	list-style: none;
}

/* ----------------Menü-Links Stufe 1 ------------------------ */
#menu  ul.ullevel1 { 
font-color:#000000; 
list-style: none;
} 
	
#menu  ul.ullevel1 a { 
display:block; 
font-color:#000000; 
background:#ffdead; 
margin-left:8px; 
padding: 5px; 
margin-bottom: 8px; 
font-family:Verdana, Arial, Helvetica,sans-serif; 
font-size: 12px; 
text-decoration:none; 
border: solid 1px #003366; 
} 

#menu  ul.ullevel1 a:link { 
display:block; 
font-color:#000000; 
background:#ffdead; 
margin-left:8px; 
padding: 5px; 
margin-bottom: 8px; 
font-family:Verdana, Arial, Helvetica,sans-serif; 
font-size: 12px; 
text-decoration:none; 
border: solid 1px #003366; 
} 


#menu  ul.ullevel1 a:visited { 
display:block; 
font-color:#000000; 
background:#ffdead; 
margin-left:8px; 
padding: 5px; 
margin-bottom: 8px; 
font-family:Verdana, Arial, Helvetica,sans-serif; 
font-size: 12px; 
text-decoration:none; 
border: solid 1px #003366; 
} 

#menu  ul.ullevel1 a:hover { 
font-color:#000000; 
background:#ffffcc; 
font-family:Verdana, Arial, Helvetica,sans-serif; 
font-size: 12px; 
text-decoration:none; 
} 

#menu  ul.ullevel1 a:active { 
font-color:#000000; 
background:#ffffcc; 
margin-left:8px; 
padding: 5px; 
margin-bottom: 8px; 
font-family:Verdana, Arial, Helvetica,sans-serif; 
font-size: 12px; 
text-decoration:none; 
border: solid 1px #003366; 
} 

#menu  ul.ullevel1 a:focus { 
font-color:#000000; 
background:#ffffcc; 
margin-left:8px; 
padding: 5px; 
margin-bottom: 8px; 
font-family:Verdana, Arial, Helvetica,sans-serif; 
font-size: 12px; 
text-decoration:none; 
border: solid 1px #003366; 
} 



/* ----------------Menü-Links Stufe 2 ------------------------ */
#menu  ul.ullevel2 {
background:none;
border:none;
margin-left: 20px;  
font-color:#000000; 
list-style: none;
	}
	
#menu  ul.ullevel2 a {   
background:none;
border:none;
margin:1px;
margin-left: 20px; 
padding:1px;
margin-left: 10px;     
text-decoration:none; 
display: list-item;
list-style-image:url(UNI/bilder/bullet.gif);
	}
#menu  ul.ullevel2 a:link {  
background:none;
border:none; 
margin:1px;
margin-left: 20px; 
padding:1px;     
text-decoration:none; 
display: list-item;
list-style-image:url(UNI/bilder/bullet.gif);
	}
#menu  ul.ullevel2 a:visited{     
background:none;
border:none;  
margin:1px;
margin-left: 20px; 
padding:1px; 
text-decoration:none; 
display: list-item;
list-style-image:url(UNI/bilder/bullet.gif);
	}

#menu  ul.ullevel2 a:hover {  
background:none;
border:none; 
margin:1px;
margin-left: 20px; 
padding:1px;   
text-decoration:underline; 
display: list-item;
list-style-image:url(UNI/bilder/bullet.gif);
	}

#menu  ul.ullevel2 a:active {    
background:none;
border:none;   
margin:1px;
margin-left: 20px; 
padding:1px; 
text-decoration:none; 
display: list-item;
list-style-image:url(UNI/bilder/bullethell.gif);
	}

#menu  ul.ullevel2 a:focus {    
background:none;
border:none;    
margin:1px;
margin-left: 20px; 
padding:1px;
text-decoration:none; 
display: list-item;
list-style-image:url(UNI/bilder/bullethell.gif);
	}
```

Folgende Probleme stellen sich mir nun:
1) mein oberster Menüpunkt wird im Internet Explorer immer ohne Hintergrund wiedergegeben - warum? warum nur der oberste?
2) die Aufzählungsgrafik in der zweiten Ebene werden nicht dargestellt (in einer anderen Seite habe ich es genauso gemacht - da geht es!)

wäre schön, wenn mir einer von euch weiterhelfen kann!
Ach ja... anschauen könnt ihr euch das ganze unter:
hsg.sport.uni-augsburg.de

## Antworten

### [#2](https://www.typo3.net/d/41090-listenmenue-mit-css/2) · lasse_69 · 2006-04-10

zu 1.

mach mal bei #menu in der css anstatt
position: relative;
-> position: absolute;

grüße

### [#3](https://www.typo3.net/d/41090-listenmenue-mit-css/3) · Andimueto · 2006-04-10

... danke jetzt passt es!
Vielen Dank für die Hilfe!

---

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