Css-Menü ohne JavaScript

Hallo allerseits,

Ich werde demnächst verrückt (eine Krankheit von Typoneulingen...)!!
Habe mit Begeisterung das neue "revised and simplified flyout menu with THREE sub levels" - Menu von CSSPlay ausprobiert und an mein Layout angepasst und es funktioniert hervorragend (ohne Typoscript). Die Besonderheit: man braucht kein JavaScript mehr und es ist ziemlich einfach.
Aber oh weh, ich weiß absolut nicht, wie ich in meinem Template den Punkt klarmache, daß es für IE eine besondere Regel gibt...
Hier der CSS-Code:
/* remove all the bullets, borders and padding from the default list styling */
#sidebar ul {
width:155px;
padding:0;
margin:0;
list-style:none;

}
/* position relative so that you can position the sub levels */
#sidebar li {
position:relative;
top: 250px;
left: 5px;
}

/* get rid of the table */
table {
position:absolute;
top:0;
left:0;
}

/* style the links */
#sidebar a, #sidebar a:visited {
display:block;
text-decoration:none;
font-size: 85%;
height:20px;
line-height:20px;
width:155px;
color:#000;
background: transparent;
text-indent:5px;
}

/* style the link hover */
#sidebar a:hover{
color:#fff;
background:#922D2D;
}

/* hide the sub levels and give them a positon absolute so that they take up no room */
#sidebar ul ul {
visibility:hidden;
position:absolute;
top:-250px;
left:145px;
}
/* make the second level visible when hover on first level list OR link */
#sidebar ul :hover ul{
visibility:visible;
}
#sidebar ul :hover ul li a {
background: #CA3232;
}

Und hier HTML:

<div id="sidebar">
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Demander un catalogue</a></li>
<li><a href="#">Qui sommes-nous ?</a></li>
<li><a href="#">Espace Pro »<!--[if IE 7]><!--></a><!--<![endif]-->
<table><tbody><tr><td>
	<ul>
	<li><a href="#">Item 3a</a></li>
	<li><a href="#nogo">Item 3b</a></li>
	<li><a href="#nogo">Item 3c</a></li>
	</ul>
	</td></tr></tbody></table>	<!--[if lte IE 6]></a><![endif]-->
	</li>
<li><a href="#">Liens</a></li>
</ul>
</div>

#menu gauche
lib.menugauche = HMENU
lib.menugauche {
  special = directory
  special.value = 3
  entryLevel = 1
      1 = TMENU
	1 {
	expAll = 1
		wrap = <ul>|</ul>
		noBlur = 1
		NO = 1
		NO.wrapItemAndSub = <li>|</li>

	}
	2 < .1	
	2.wrap = <ul>|</ul>

}

Ich benutze Typo3 4.0.1-rc1 und TemplaVoila 1.0.1
Wie kann ich das lösen???
Danke im Voraus,

Astrid

astrula schrieb

Aber oh weh, ich weiß absolut nicht, wie ich in meinem Template den Punkt klarmache, daß es für IE eine besondere Regel gibt...

Naja, indem du per Condition das Menu für den IE anders renderst.

PS: Warum die 2. Ebene des Menus mit einer Tabelle eingezäunt ist, ist mir nicht klar.

Wen es interessiert, ich habe die Lösung gefunden:

#menu gauche
lib.menugauche = HMENU
lib.menugauche {
  special = directory
  special.value = 3
      1 = TMENU
	1 {
	expAll = 1
		wrap =  | </ul></td></tr></tbody></table><!--[if lte IE 6]></a><![endif]--></li>
		noBlur = 1
		NO = 1
		NO.wrapItemAndSub = <li>|</li>
	IFSUB = 1
	IFSUB {
	allWrap.dataWrap = <li><a href="index.php?id={field:uid}">{field:title}<!--[if IE 7]><!--></a><!--<![endif]--><table><tbody><tr><td><ul>
	doNotShowLink = 1
	}
	ACTIFSUB < .IFSUB
	  }
	2 < .1
	wrap = <ul> | </ul>
}

Astrid