---
title: "TMENU mit CSS backgroundimages"
url: "https://www.typo3.net/d/37414-tmenu-mit-css-backgroundimages"
source: "typo3.net"
tags: ["TYPO3","Menüs","Frage"]
created: "2006-02-06"
last_reply: "2006-02-07"
replies: 3
solved: false
page: 1
pages: 1
lang: "de"
---

# TMENU mit CSS backgroundimages

TYPO3 › Menüs · 3 Antworten · gestartet 2006-02-06

## Eröffnungsbeitrag

**Artworker84** · 2006-02-06 · [Beitrag #1](https://www.typo3.net/d/37414-tmenu-mit-css-backgroundimages/1)

Folgendes Problem: Ich habe 3 Menüzustände, eine unterneinanderfolgende Navigation und jeweils einen Grafischen Zustand für NO, RO, und ACT NO, und ACT funzen einwandfrei, nir der RO will nicht, so wie ich das gerne will, quasi garnicht.

meine Daten:

Typoscript:

```typoscript
NAVI_1 = HMENU
                              NAVI_1 {

                                       special = directory
                                       special.value = 4
                                       entryLevel = 1

                                                1 = TMENU        
                                                1.NO = 1
                                                1.NO.linkWrap = <span class="linka">|</span><br />|*|<span class="linka">|</span><br />|*|<span class="linka">|</span><br />
                                                
                                                1.RO < .1.NO
			1.RO = 1
                                                1.RO.linkWrap = <span class="linka_hover">|</span><br />|*|<span class="linka_hover">|</span><br />|*|<span class="linka_hover">|</span><br />
												
			1.ACT < .1.NO
			1.ACT = 1
                                                1.ACT.linkWrap = <span class="linka_act">|</span><br />|*|<span class="linka_act">|</span><br />|*|<span class="linka_act">|</span><br />
												
			1.IFSUB < .1.NO
                                                1.IFSUB = 1
												
			1.ACTIFSUB < .1.NO
                                                1.ACTIFSUB = 1
                                                1.ACTIFSUB.linkWrap = <span class="linka_act">|</span><br />|*|<span class="linka_act">|</span><br />|*|<span class="linka_act">|</span><br />


                                                2 = TMENU        
                                                2.NO = 1
                                                2.NO.linkWrap = <span class="linkb">|</span><br />|*|<span class="linkb">|</span><br />|*|<span class="linkb">|</span><br />
												
                                                2.RO < .2.NO
			2.RO = 1
                                                2.RO.linkWrap = <span class="linkb_hover">|</span><br />|*|<span class="linkb_hover">|</span><br />|*|<span class="linkb_hover">|</span><br />

                                                2.ACT < .2.NO
                                                2.ACT = 1
                                                2.ACT.linkWrap = <span class="linkb_act">|</span><br />|*|<span class="linkb_act">|</span><br />|*|<span class="linkb_act">|</span><br />
												
			2.IFSUB < .2.NO
                                                2.IFSUB = 1
												
			2.ACTIFSUB < .1.NO
                                                2.ACTIFSUB = 1
                                                2.ACTIFSUB.linkWrap = <span class="linkb_act">|</span><br />|*|<span class="linkb_act">|</span><br />|*|<span class="linkb_act">|</span><br />
}
```

CSS:

```html
/* jetzt deklariere ich die erste Navigationsleistenebene*/

.linka a { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; color:#2a3e73; text-decoration:none; vertical-align:middle; padding-top:3px; padding-left:6px; font-weight:bold; background-image:url(graphik/nav_bg_normal.gif); background-repeat:no-repeat; height:19px; width:171px; }
.linka a:visited { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; color:#2a3e73; text-decoration:none; vertical-align:middle; padding-top:3px; padding-left:6px; font-weight:bold; background-image:url(graphik/nav_bg_normal.gif); background-repeat:no-repeat; height:19px; width:171px; }
.linka a:hover { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; color:#2a3e73; text-decoration:none; vertical-align:middle; padding-top:3px; padding-left:6px; font-weight:bold; background-image:url(graphik/nav_bg_normal.gif); background-repeat:no-repeat; height:19px; width:171px; }
.linka a:active {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; color:#2a3e73; text-decoration:none; vertical-align:middle; padding-top:3px; padding-left:6px; font-weight:bold; background-image:url(graphik/nav_bg_normal.gif); background-repeat:no-repeat; height:19px; width:171px; }

/* erste Navigationsleistenebene active*/

.linka_act a { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; color:#2a3e73; text-decoration:none; vertical-align:middle; padding-top:3px; padding-left:6px; font-weight:bold; background-image:url(graphik/nav_bg_act.gif); background-repeat:no-repeat; height:19px; width:171px; }
.linka_act a:visited { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; color:#2a3e73; text-decoration:none; vertical-align:middle; padding-top:3px; padding-left:6px; font-weight:bold; background-image:url(graphik/nav_bg_act.gif); background-repeat:no-repeat; height:19px; width:171px; }
.linka_act a:hover { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; color:#2a3e73; text-decoration:none; vertical-align:middle; padding-top:3px; padding-left:6px; font-weight:bold; background-image:url(graphik/nav_bg_act.gif); background-repeat:no-repeat; height:19px; width:171px; }
.linka_act a:active { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; color:#2a3e73; text-decoration:none; vertical-align:middle; padding-top:3px; padding-left:6px; font-weight:bold; background-image:url(graphik/nav_bg_act.gif); background-repeat:no-repeat; height:19px; width:171px; }

/* erste Navigationsleistenebene hover*/

.linka_hover a { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; color:#2a3e73; text-decoration:none; vertical-align:middle; padding-top:3px; padding-left:6px; font-weight:bold; background-image:url(graphik/nav_bg_hover.gif); background-repeat:no-repeat; height:19px; width:171px; }
.linka_hover a:visited { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; color:#2a3e73; text-decoration:none; vertical-align:middle; padding-top:3px; padding-left:6px; font-weight:bold; background-image:url(graphik/nav_bg_hover.gif); background-repeat:no-repeat; height:19px; width:171px; }
.linka_hover a:hover { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; color:#2a3e73; text-decoration:none; vertical-align:middle; padding-top:3px; padding-left:6px; font-weight:bold; background-image:url(graphik/nav_bg_hover.gif); background-repeat:no-repeat; height:19px; width:171px; }
.linka_hover a:active { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; color:#2a3e73; text-decoration:none; vertical-align:middle; padding-top:3px; padding-left:6px; font-weight:bold; background-image:url(graphik/nav_bg_hover.gif); background-repeat:no-repeat; height:19px; width:171px; }

/* jetzt deklariere ich die zweite Navigationsleistenebene*/


.linkb a { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; color:#2a3e73; text-decoration:none; vertical-align:middle; padding-top:3px; padding-left:16px; font-weight:bold; background-image:url(graphik/nav_bg_normal_link_b.gif); background-repeat:no-repeat; height:19px; width:171px; }
.linkb a:visited { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; color:#2a3e73; text-decoration:none; vertical-align:middle; padding-top:3px; padding-left:16px; font-weight:bold; background-image:url(graphik/nav_bg_normal_link_b.gif); background-repeat:no-repeat; height:19px; width:171px; }
.linkb a:hover { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; color:#2a3e73; text-decoration:none; vertical-align:middle; padding-top:3px; padding-left:16px; font-weight:bold; background-image:url(graphik/nav_bg_normal_link_b.gif); background-repeat:no-repeat; height:19px; width:171px; }
.linkb a:active {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; color:#2a3e73; text-decoration:none; vertical-align:middle; padding-top:3px; padding-left:16px; font-weight:bold; background-image:url(graphik/nav_bg_normal_link_b.gif); background-repeat:no-repeat; height:19px; width:171px; }

/* erste Navigationsleistenebene active*/

.linkb_act a { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; color:#2a3e73; text-decoration:none; vertical-align:middle; padding-top:3px; padding-left:16px; font-weight:bold; background-image:url(graphik/nav_bg_act.gif); background-repeat:no-repeat; height:19px; width:171px; }
.linkb_act a:visited { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; color:#2a3e73; text-decoration:none; vertical-align:middle; padding-top:3px; padding-left:16px; font-weight:bold; background-image:url(graphik/nav_bg_act.gif); background-repeat:no-repeat; height:19px; width:171px; }
.linkb_act a:hover { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; color:#2a3e73; text-decoration:none; vertical-align:middle; padding-top:3px; padding-left:16px; font-weight:bold; background-image:url(graphik/nav_bg_act.gif); background-repeat:no-repeat; height:19px; width:171px; }
.linkb_act a:active { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; color:#2a3e73; text-decoration:none; vertical-align:middle; padding-top:3px; padding-left:16px; font-weight:bold; background-image:url(graphik/nav_bg_act.gif); background-repeat:no-repeat; height:19px; width:171px; }

/* erste Navigationsleistenebene hover*/

.linkb_hover a { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; color:#2a3e73; text-decoration:none; vertical-align:middle; padding-top:3px; padding-left:16px; font-weight:bold; background-image:url(graphik/nav_bg_hover.gif); background-repeat:no-repeat; height:19px; width:171px; }
.linkb_hover a:visited { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; color:#2a3e73; text-decoration:none; vertical-align:middle; padding-top:3px; padding-left:16px; font-weight:bold; background-image:url(graphik/nav_bg_hover.gif); background-repeat:no-repeat; height:19px; width:171px; }
.linkb_hover a:hover { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; color:#2a3e73; text-decoration:none; vertical-align:middle; padding-top:3px; padding-left:16px; font-weight:bold; background-image:url(graphik/nav_bg_hover.gif); background-repeat:no-repeat; height:19px; width:171px; }
.linkb_hover a:active { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; color:#2a3e73; text-decoration:none; vertical-align:middle; padding-top:3px; padding-left:16px; font-weight:bold; background-image:url(graphik/nav_bg_hover.gif); background-repeat:no-repeat; height:19px; width:171px; }
```

Wenn jemand hier durchblickt, und mir sagen kann wieso der RO Zustand ignoriert wird, wäre ich sehr dankbar!

## Antworten

### [#2](https://www.typo3.net/d/37414-tmenu-mit-css-backgroundimages/2) · birgitr · 2006-02-06

probier mal im CSS nur
.linka_hover
ohne a:hover

ich kenne das Problem vom Firefox

### [#3](https://www.typo3.net/d/37414-tmenu-mit-css-backgroundimages/3) · Artworker84 · 2006-02-07

sorry, das geht auch nicht #angry#

noch ein vorschlag??*hoff*

### [#4](https://www.typo3.net/d/37414-tmenu-mit-css-backgroundimages/4) · tandem · 2006-02-07

Hallo,

war der falsche Thread - sorry

---

Quelle: „TMENU mit CSS backgroundimages“, typo3.net, https://www.typo3.net/d/37414-tmenu-mit-css-backgroundimages
Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.