Hallo liebe gemeinde,
ich habe mit dem tut von frank hess a la suckerfish ein horizontales flyoutmenu auf meiner seite erstellt.
Leider hat das menu im ie6 einen horizontalen scrollbalken sodass die untermenus bei mouseover nicht angezeigt werden können.
mein css code:
Code:
.mod_navigation ul
{
margin:0;
padding:0;
list-style-type:none;
}
.mod_navigation
{
width:650px;
position:absolute;
overflow:visible;
z-index:999;
}
.mod_navigation p
{
margin:0;
padding:0;
}
.mod_navigation li
{
width:80px;
position:relative;
float:left;
background-color:#999999;
border-right:1px solid #ffffff;
border-bottom:1px solid #ffffff;
border-left:1px solid #ffffff;
line-height:35px;
}
.mod_navigation li ul ul
{
left:161px;
position:absolute;
top:0px;
}
.mod_navigation li:hover ul
{
display:block;
}
.mod_navigation ul li:hover ul ul
{
display:none;
}
.mod_navigation ul ul li:hover ul
{
display:block;
}
/* ID aus jscript übernehmen */
.mod_navigation ul li:hover ul,
.mod_navigation ul li.sfhover ul
{
display:block;
}
.mod_navigation ul li:hover ul ul,
.mod_navigation ul li.sfhover ul ul
{
display:none;
}
.mod_navigation ul ul li:hover ul,
.mod_navigation ul ul li.sfhover ul
{
display:block;
}
.mod_navigation a
{
padding-left:5px;
text-decoration:none;
color:#ffffff;
}
.mod_navigation li:hover,
.mod_navigation li.sfhover
{
background-color:#666666;
}
.mod_navigation li ul
{
bottom:0;
left:-1px;
position:absolute;
display:none;
right:0px;
top:36px;
}
mein javascript:
Code:
// JavaScript Document
sfHover = function() {
var sfEls = document.getElementById("header").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);
ab ie7 funzt alles
weiß da jemand rat?
Lesezeichen