[css] IE6 nie zwraca uwagi na niektóre class Opcje

[szczurek]

Więc do rzeczy. W książce "CSS według Erica Meyera, kolejna odsłona" jest bardzo fajne rozwiązanie rozwijanego menu(rozdział 6). Kiedy potrzebuję takiego sięgam właśnie do tej książki.

Teraz robię coś po koleżeńsku no i "zleceniodawca" wymyślił sobie że menu będzie graficze. Zacząłem modyfikować kod dodałem odpowiednie klasy no i pod ff i operą wszystki podmienia się tak jak chcę a pod IE wszystko się rozwija ale kiedy najeżdżam na jakiś element to jako tło podmienia obrazek podany w ostatniej klasie definiowanej w css a nie w klasie o tej nazwie. Co jest dziwne bo bez howera daje dobre obrazki a są wstawiane tą samą metodą.

Trochę zakręciłem więc może pokaże co się dzieje.
Tutaj

a oto kod za to odpowiedzialny.

[HTML] pobierz, plaintext 
<div id="nav">
<ul class="level1">
 
 <li class="submenu restauracja"><a class="submenu"></a>
  <ul class="level2">
   <li class="sub"><a class="sub" href="/services/strategy/"><img class="sub" src="pzrzyciski/01 konferencje.jpg" alt="konferencje" /></a></li>
   <li class="sub"><a class="sub" href="/services/optimize/"><img class="sub" src="pzrzyciski/02 szkolenia.jpg" alt="szkolenia" /></a></li>
   <li class="sub"><a class="sub" href="/services/guidance/"><img class="sub" src="pzrzyciski/03 wesela.jpg" alt="wesela" /></a></li>
   <li class="sub"><a class="sub" href="/services/training/"><img class="sub" src="pzrzyciski/04 imprezy.jpg" alt="imprezy" /></a></li>
  </ul>
 </li>
 <li class="menu"><a href="in">       </a></li>
 <li class="wydarzenia"><a href="/events/"></a></li>
<li class="gal"><a href="/events/"></a></li>
 <li class="kontakt_m"><a href="/contact/"></a></li>
</ul>
</div>
[HTML] pobierz, plaintext 

css:

[HTML] pobierz, plaintext 
/* MENU */
 
div#nav {float: left; margin: -1px 0 0 7em;}
div#nav ul {margin: 0; padding: 0;}
div#nav li {position: relative; list-style: none; margin: 0;
  float: left;}
div#nav li:hover {}
div#nav li.submenu {}
div#nav li.submenu:hover {}
div#nav li a {display: block; 
  text-decoration: none;
  font-weight: bold; color: #BABC74;}
div#nav>ul a {width: auto;}
div#nav ul ul {position: absolute;
  display: none;}
div#nav ul ul li {}
div#nav li.submenu li.submenu {}
div#nav ul.level1 li.submenu:hover ul.level2, 
div#nav ul.level2 li.submenu:hover ul.level3 {display:block;}
div#nav ul.level2 {top: 38px; left: -1px; margin-top: 2px;}
div#nav ul.level3 {top: -1px; left: 7em;}
 
  /* DADATKOWE*/
div#nav li.menu{
	background-image: url(pzrzyciski/menu2.jpg);
	height: 40px;
	width: 82px;
}
div#nav li.menu:hover{
	background-image: url(pzrzyciski/menu.jpg);
}
 
div#nav li.restauracja{
	background-image: url(pzrzyciski/restauracja_01.jpg);
	height: 40px;
	width: 119px;
}
div#nav li:hover.restauracja
{
	background-image: url(pzrzyciski/restauracja_02.jpg);
}
 
div#nav li.wydarzenia{
	background-image: url(pzrzyciski/wydazenia2.jpg);
	height: 40px;
	width: 117px;
}
div#nav li.wydarzenia:hover{
	background-image: url(pzrzyciski/wydazenia.jpg);
}
 
div#nav li.gal{
	background-image: url(pzrzyciski/galeria2.jpg);
	height: 40px;
	width: 97px;
}
div#nav li.gal:hover{
	background-image: url(pzrzyciski/galeria.jpg);
}
 
div#nav li.kontakt_m{
	background-image: url(pzrzyciski/kontakt2.jpg);
height: 40px;
width: 118px;
}
div#nav li.kontakt_m:hover{
	background-image: url(pzrzyciski/kontakt.jpg);
}
 
div#nav li.sub{
	height: 29px;
	padding-left: 0;
}
div#nav img.sub{
width: 119px;
border: 0;
}
 
div#nav a.sub{
	border: 0;
}
[HTML] pobierz, plaintext 

Może ktoś ma pomysł jak pomóc IE wyświetlać po najechaniu takie obrazki jak ja chcę a nie ciągle ten sam.
Pozdrawiam.

[jarrod]

IE 6 nie respektuje atrybutu hover dla elementów innych niż <a>.
Użyj w tym wypadku javascriptów i atrybutu onmouseover aby otrzymać prawidłowy efekt pod IE 6. Dopierto wersja 7 doczekała się odpowiedniej reakcji na hover...