---
title: "Probleme bei horizont. CSS-Menü"
url: "https://www.typo3.net/d/67898-probleme-bei-horizont-css-menue"
source: "typo3.net"
tags: ["TYPO3","Menüs","Frage","HTML & CSS"]
created: "2007-09-09"
last_reply: "2007-09-13"
replies: 2
solved: false
page: 1
pages: 1
lang: "de"
---

# Probleme bei horizont. CSS-Menü

TYPO3 › Menüs · 2 Antworten · gestartet 2007-09-09

## Eröffnungsbeitrag

**Organic** · 2007-09-09 · [Beitrag #1](https://www.typo3.net/d/67898-probleme-bei-horizont-css-menue/1)

Hallo Forum,

ich bin gerade dabei das <http://www.cssplay.co.uk/menus/flyout_horizontal.html> von Stu Nicolls in Typo3 umzusetzen, komme aber irgendwie nicht weiter.
Das Menü funktioniert im IE 7 und FF, doch leider nicht im IE 6.

Vielleicht kann mir ja jemand einen Tipp geben.

Code für den Header:

```typoscript
page.headerData.20 = TEXT
page.headerData.20.value (
<!--[if lte IE 6]>
<link rel="stylesheet" media="all" type="text/css" href="fileadmin/css/flyout_h_ie.css" />
<![endif]-->
)
```

Code fürs Menü:

```typoscript
#Hauptnavigation
MENU = HMENU
MENU {
	1 = TMENU
        1 {
            wrap = <ul>|</ul>
            expAll = 1
            noBlur = 1    
            NO.ATagTitle.field = subtitle//title
            NO.wrapItemAndSub = <li>|</li>
                        
            IFSUB = 1
            IFSUB {
                   wrapItemAndSub = <li>|</li>
                   ATagParams = class="hide"
                   }
           }
        
        2 = TMENU
        2 {
           wrap = <!--[if IE 6]><table><tr><td><![endif]--><ul> | </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
           expAll = 1
           noBlur = 1
           
           NO.ATagTitle.field = subtitle//title
           NO.wrapItemAndSub = <li> | </li>                   
           }
	}
```

Ich muss irgendwie zwischen "2 {wrap = <!--[if IE 6]>" und "<table><tr><td><![endif]--><ul>..." noch einmal einen a href reinbekommen.

So soll es aussehen:

```html
<div class="menu">
	<ul>
		<li><a class="hide" href="#">Home</a></li>
		<li><a class="hide" href="#">Nagelstudio</a>
		<!--[if lte IE 6]>
		<a href="#">Nagelstudio
		<table><tr><td>
		<![endif]-->
		<ul>
			<li><a href="#" title="Maniküre">Maniküre</a></li>
			<li><a href="#" title="Verlängerung">Verlängerung</a></li>
			<li><a href="#" title="Verstärkung">Verstärkung</a></li>
			<li><a href="#" title="Nail Art">Nail Art</a></li>
		</ul>
		<!--[if lte IE 6]>
		</td></tr></table>
		</a>
		<![endif]-->
		</li>
		<li><a class="hide" href="#">Fuss-French</a></li>
		<li><a class="hide" href="#">Fachfusspflege</a>
		<!--[if lte IE 6]>
		<a href="#">Fachfusspflege
		<table><tr><td>
		<![endif]-->
		<ul>
			<li><a href="#" title="#">Produkte</a></li>
			<li><a href="#" title="#">Preise</a></li>
			<li><a href="#" title="#">Gutscheine</a></li>
			</ul>
		<!--[if lte IE 6]>
		</td></tr></table>
		</a>
		<![endif]-->
		</li>
		<li><a class="hide" href="#">Preise</a>
		<!--[if lte IE 6]>
		<a href="#">Preise
		<table><tr><td>
		<![endif]-->
			<ul>
				<li><a href="#" title="#">Gutscheine</a></li>
			</ul>
		<!--[if lte IE 6]>
		</td></tr></table>
		</a>
		<![endif]-->
		</li>
		<li><a class="hide" href="#">Öffnungszeiten</a></li>
		<li><a class="hide" href="#">Fotoalbum</a></li>
		<li><a class="hide" href="#">Fragen</a></li>
		<li><a class="hide" href="#">Kontakt / Anfahrt</a></li>
		<li><a class="hide" href="#">Impressum</a></li>
	</ul>
</div>
```

Die URL für Vorschau:
<http://nailsworld.wendelken.net>

Schon einmal besten Dank im voraus

Gruß
Organic

## Antworten

### [#2](https://www.typo3.net/d/67898-probleme-bei-horizont-css-menue/2) · Schengo · 2007-09-13

Hallo Organic.

Es liegt vielleicht am hover-Befehl. Es ging bei mir erst auch nicht, bis ich diesen FIX für IE eingefügt habe.

Ich habe eine eigene .js-Datei angelegt und die dann im <head> eingefügt:

```javascript
<!--//--><![CDATA[//><!--

sfHover = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]>
```

Dann musst du natürlich noch die sfhover-Elemente in deiner CSS-Datei deklarieren.

Gruß Schengo

### [#3](https://www.typo3.net/d/67898-probleme-bei-horizont-css-menue/3) · Unbekannter Benutzer · 2007-09-13

Nein, es liegt an dem fehlenden Link, wie Organic schon geschrieben hat.
Such mal hier im Forum, dieses Menü hat schon mal jemand in TS umgesetzt. Aber das ist weder barrierefrei noch standardkonform. Sinnvoller ist doch ein JS gestütztes Drop-Down.

Grüße
Christian

---

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