Najpierw podam kod a później postaram się dokładnie opisać w czym jest problem.
HTML
(...) (...) (...) <!-- Skrypt do rozwijania menu dla IE --> 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); //--><!]]></script> (...) (...) (...) <!-- Menu rozwijane --> <div id="bloknawigacyjny"> <ul id="nav"> <ul> </ul> </li> </ul> </div>
CSS
Kod
#bloknawigacyjny {
margin: 0 1px;
padding: 0;
}
#nav li {
float: left;
background-image: url(../layout/odziez.gif);
}
#nav li ul {
position: absolute;
width: 5em;
left: -999em;
}
#nav li ul li {
background-image: none;
background-color: #F9F9F9;
width: 140px;
border-left: 1px #BEBEBE solid;
border-right: 1px #BEBEBE solid;
border-bottom: 1px #BEBEBE solid;
}
#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
}
#nav a {
display: block;
}
#nav li ul li:hover {
background-color: #9ED235;
}
}
#nav li ul li a {
padding: 4px 0;
padding-left: 10px;
font-family: Arial, Helvetica, Verdana sans-serif;
font-size: 11px;
color: #666666;
text-decoration: none;
}
#nav li:hover ul {
left: auto;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}
margin: 0 1px;
padding: 0;
}
#nav li {
float: left;
background-image: url(../layout/odziez.gif);
}
#nav li ul {
position: absolute;
width: 5em;
left: -999em;
}
#nav li ul li {
background-image: none;
background-color: #F9F9F9;
width: 140px;
border-left: 1px #BEBEBE solid;
border-right: 1px #BEBEBE solid;
border-bottom: 1px #BEBEBE solid;
}
#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
}
#nav a {
display: block;
}
#nav li ul li:hover {
background-color: #9ED235;
}
}
#nav li ul li a {
padding: 4px 0;
padding-left: 10px;
font-family: Arial, Helvetica, Verdana sans-serif;
font-size: 11px;
color: #666666;
text-decoration: none;
}
#nav li:hover ul {
left: auto;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}
Po najechaniu myszką na rozwinięty element menu jest on podświetlany..
W Operze i FF działa tak -> KLIK
Natomiast w IE działa tak (nie podświetla): -> KLIK
Więc do kodu css dodałem jeszcze taki fragment:
Kod
#nav li ul li a:hover {
background-color: #9ED235;
}
background-color: #9ED235;
}
Brawo działa w IE!!
I TERAZ SEDNO SPRAWY
Żeby w IE zadziałało podświetlenie wskazanego elementu rozwiniętej listy trzeba dokładnie najechać na test (który jest linkiem z text-decoration: none). Wystarczy że wskaże myszą w danym polu LI ale poza linkiem podświetlenie znika i całość wyglada tak jakby się nie podświetlały elementy rozwiniętego menu.
Wiem, że IE interpretuje tylko a:hover.
Ma ktoś pomysł jak to obejść. Bardzo mi zależy na tym kodzie bo jest on bardzo przejrzysty