Salve a tutti!
Sto creando un sito per la mia azienda ma sto avendo dei problemi con il CSS e Internet Explorer 6.
Ho creato un menu drop down con questo codice:
codice:
#nav{
border:none;
border:0px;
margin:0px;
padding:0px;
font-family:verdana,geneva,arial,helvetica,sans-serif;
font-size:14px;
font-weight:bold;
color:#8e8e8e;
}
#nav ul{
background:url(images/menu-bg.gif) top left repeat-x;
height:43px;
list-style:none;
margin:0;
padding:0;
}
#nav li{
list-style:none;
background:url(images/menu-bg.gif) top left repeat-x;
float:left;
padding:0px 8px 0px 9px;
}
#nav li a{
color:#666666;
display:block;
font-weight:bold;
line-height:43px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
#nav li a:hover{
color:#000000;
text-decoration:none;
}
#nav li ul{
background:#e0e0e0;
border-left:2px solid #0079b2;
border-right:2px solid #0079b2;
border-bottom:2px solid #0079b2;
display:none;
height:auto;
filter:alpha(opacity=95);
opacity:0.95;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;*/
}
#nav li li {
background:#e0e0e0;
display:block;
float:none;
padding:0px;
width:225px;
}
#nav li ul a{
display:block;
font-size:12px;
font-style:normal;
padding:0px 10px 0px 15px;
text-align:left;
}
#nav li ul a:hover{
background:#949494;
color:#000000;
opacity:1.0;
filter:alpha(opacity=100);
}
#nav li ul ul{
position:absolute;
top: 7em;
float:left;
}
#nav p{
clear:left;
}
#nav #current{
background:url(images/current-bg.gif) top left repeat-x;
color:#ffffff;
}
#nav ul{
display:none;
}
/*all see this */
#nav ul ul{
border-top:2px solid #0079b2;
position:absolute;
margin-top:-1.8em;
margin-left:12em;
}
/* non-IE browsers see this */
#nav ul li>ul, #nav ul ul li>ul{
margin-top:-1.4em;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul, #nav li:hover ul ul ul ul ul{
display:none;
}
#nav li:hover ul, #nav ul li:hover ul, #nav ul ul li:hover ul, #nav ul ul ul li:hover ul, #nav ul ul ul ul li:hover ul{
display:block;
}
li>ul {
top: auto;
left: auto;
}
Con altri browser non ho problemi a visualizzare il menu, ma con IE 6 non appare il sotto menu quando passo sopra al menu padre.
Questo è il link del mio sito: http://labvaldarno.altervista.org
Per cercare di risolvere ho usato questo codice in un nuovo file js:
codice:
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);
ed ho scritto nell <head> della pagina del sito questo codice:
codice:
<script type="text/javascript" src="Scripts/mainNav.js"></script>
Fatto tutto questo non riesco comunque a vedere il menu in IE 6. Qualcuno sa come potermi aiutare? Grazie mille a tutti in anticipo!
Ciao ciao
Andrea