Ciao a tutti,
ho una semplice funzione java per un "drill down menu". la funzione e' la segunete:
sfHover = function() {
var sfEls = document.getElementById("menu").getElementsByTagNa me("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);
nel .ccs ho inserito le seguenti classi:
/*menu*/
.menu { padding:0; margin:0 auto; width:942px; background:#000; }
.menu ul { text-align: left; padding:0; margin:0; list-style:none; border:0; float:left;}
.menu ul li { float:left; margin:0; padding:0 5px 0 0; border:0;}
.menu ul li a { float:left; margin:0; padding:16px 15px; color:#fff; font:normal 12px Arial, Helvetica, sans-serif; text-decoration:none;}
.menu ul li a:hover { background:#89C541;}
.menu ul li a.active { background:#89C541;}
/*_________second level menu__________*/
.menu li ul {
position: absolute;
z-index: 20;
background: #F79423;
margin:47px 0 0 0;
width: 150px;
padding: 0;
left: -999em;
}
.menu li ul li {
margin: 0;
padding: 0;
width: 150px;
}
.menu li ul li a {
padding: 0px 15px;
display: block;
height: 24px;
font-weight: normal;
color: #FFFFFF;
background: #000000 !important;
font-size: 10px;
line-height: 24px;
text-decoration: none;
border-top: 1px solid #FFFFFF;
width: 150px !important;
}
.menu li ul li a:hover {
background: #89C541 !important;
}
/*_______third level list_______*/
.menu li ul ul { /* third-and-above-level lists */
margin: 0 0 0 180px;
}
.menu li:hover ul ul, .menu li:hover ul ul ul, .menu li.sfhover ul ul, .menu li.sfhover ul ul ul {
left: -999em;
}
.menu li:hover ul, .menu li li:hover ul, .menu li li li:hover ul, .menu li.sfhover ul, .menu li li.sfhover ul, .menu li li li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}
in IE 8 e Crome no ho nessun problema....
in IE 7 i submenu hanno uno strano comportamento... si spostano di lato, lasciando degli spazi vuoti (il sito e' live www.italiansrestaurant.com.au ed il menu in oggetto e' Menu->Function Special)
credo che il problema sia necss... ma nn riesco a capire come mai in IE8 e Crome tutto funziona...
grazie a tutti
Vit
