Hallo!
Habe nach diesem Post #39055
von Just2B ein vertikales Layermenu erstellt.
War auch erst hellauf begeistert, dass es es reibungslos klappte.
Doch dann leider das böse Erwachen: im IE 8 erscheinen leider keine Layer. Die Pfeile als Hinweis für die Untermenüpunkte erscheinen, aber die Layer leider nicht.
Was mache ich falsch dass es bei allen klappt, nur bei mir nicht??? 😢
Hier meine Codierungen:
JavaScript:
function IEHoverPseudo() {
var navItems = document.getElementById("nav").getElementsByTagName("li");
for (var i=0; i<navItems.length; i++) {
if(navItems[i].className == "menuparent") {
navItems[i].onmouseover=function() { this.className += " over"; }
navItems[i].onmouseout=function() { this.className = "menuparent"; }
}
}
}
window.onload = IEHoverPseudo;
Einbindung im TS:
page = PAGE
page {
typeNum = 0
headerData = COA
headerData.11 = TEXT
headerData.11.value = <script type="text/javascript" src="JSLayer.js"></script>
NAVILINKS = HMENU
NAVILINKS {
special = directory
special.value = 3
1 = TMENU
1 {
expAll = 1
wrap = <ul id="nav">|</ul>
noBlur = 1
NO = 1
NO.wrapItemAndSub = <li>|</li>
IFSUB = 1
IFSUB.wrapItemAndSub = <li class="menuparent">|</li>
ACTIFSUB < .IFSUB
}
2 < .1
2.wrap = <ul>|</ul>
3 < .2
4 < .2
}
Und hier das CSS
#navilinks { margin-left:60px; }
#navilinks ul { font-weight:normal; list-style:none; margin:0px; padding:0px;}
#navilinks ul a { display:block; padding-left:5px; font-size:10px; font-weight:bold; }
#navilinks li { line-height:15px; }
ul#nav,
ul#nav ul { margin:0; padding:0; width:132px; border-bottom: 1px solid #AAAAAA;
background:#CCDDFF; color:black; font-size: 100%; }
ul#nav li { position:relative; list-style:none; }
ul#nav li a { padding:5px; display:block; text-decoration:none; color:black; border:1px solid #999999;
border-bottom:0; }
/* Fix IE. Hide from IE Mac \*/
* html ul#nav li { float: left; height: 1%; }
* html ul#nav li a { height: 1%; }
/* End */
ul#nav ul { position:absolute; display:none; left:131px; top:0; } /* 1 Pixel weniger als Menu-Breite */
ul#nav li ul li a { padding: 2px 5px; background-color:#FFFFDD; } /* Untermenu - Layer*/
ul#nav li:hover ul ul,
ul#nav li:hover ul ul ul,
ul#nav li.over ul ul,
ul#nav li.over ul ul ul { display:none; } /* Hide sub-menus initially */
ul#nav li:hover ul,
ul#nav li li:hover ul,
ul#nav li li li:hover ul,
ul#nav li.over ul,
ul#nav li li.over ul,
ul#nav li li li.over ul { display:block; } /* The magic */
ul#nav li.menuparent { background:transparent url(/fileadmin/Icons/IconPfeilRechts.gif) right center no-repeat; }
ul#nav li.menuparent:hover,
ul#nav li.over { background-color:white; }
ul#nav li a:hover { color:mediumblue; text-decoration:none; }
Danke vielmals im Voraus.
Annna