Menu oparte o css, problem z a:hover Opcje

[Jarod]

Męczę się z menu. Mam ładny kod ale pod IE nie jest do końca tak jakbym chciał (niby drobnostka a przeszkadza).

Najpierw podam kod a później postaram się dokładnie opisać w czym jest problem.

HTML

[HTML] pobierz, plaintext 
(...)
(...)
(...)
      <!-- Skrypt do rozwijania menu dla IE -->
	  <script type="text/javascript"><!--//--><![CDATA[//><!--
 
          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">
                     <li><a href="#" onmouseover="document.odziez.src='layout/odziez2.gif'" onmouseout="document.odziez.src='layout/odziez.gif'"><img src="layout/odziez.gif" width="75px" height="33px" name="odziez" alt="Odzież" border="0" /></a>
						 <ul>
                             <li> <a href="#">T-Shirt</a> </li>
                             <li> <a href="#">Koszulki Polo</a> </li>
                             <li> <a href="#">Bluzy</a> </li>
                             <li> <a href="#">Polary</a> </li>
                             <li> <a href="#">Wiatrówki</a> </li>
                             <li> <a href="#">Czapki</a> </li>
                             <li> <a href="#">Hafty</a> </li>
                         </ul>
	                 </li>
 
                 </ul>
			 </div>
[HTML] pobierz, plaintext 

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;
}

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;
}

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