Sous-menu interactif

Bonjour,

Je ne comprends fraiment pas pourquoi le rollOver sur un élément de liste ne remplace pas img1.jpg par img2.jpg, alors que la ccs semble correct:

div#nav {float: left; width: 7em; margin: -1px 0 0 -1px; }
div#nav ul {margin: 0; padding: 0; width: 7em; background: white;
  border: 1px solid #AAA;}
div#nav li {position: relative; list-style: none; margin: 0;
  border-bottom: 1px solid #CCC;}
div#nav li.submenu {background-image:url(img1.jpg);}
div#nav li.submenu:hover {background-image:url(img2.jpg);}
div#nav li a {display: block; padding: 0.25em 0 0.25em 0.5em;
  text-decoration: none; width: 6.5em;}
div#nav>ul a {width: auto;}
div#nav ul ul {position: absolute; top: 0; left: 7em;
  display: none;}
div#nav ul.level1 li.submenu:hover ul.level2, 
div#nav ul.level2 li.submenu:hover ul.level3 {display:block;}

et l'HTML:

<div id="nav">
			<ul class="level1">
			 <li><a href="/">Home</a></li>
			 <li class="submenu"><a href="/services/">Services</a>
			  <ul class="level2">
			   <li><a href="/services/strategy/">Strategy</a></li>
			   <li><a href="/services/optimize/">Optimization</a></li>
			   <li><a href="/services/guidance/">Guidance</a></li>
			   <li><a href="/services/training/">Training</a></li>
			  </ul>
			 </li>
			 <li><a href="/events/">Events</a></li>
			 <li class="submenu"><a href="/pubs/">Publications</a>
			  <ul class="level2">
			   <li><a href="/pubs/articles/">Articles</a></li>
			   <li class="submenu"><a href="/pubs/tuts/">Tutorials</a>
				<ul class="level3">
				 <li><a href="/pubs/tuts/html/">HTML</a></li>
				 <li><a href="/pubs/tuts/css/">CSS</a></li>
				 <li><a href="/pubs/tuts/svg/">SVG</a></li>
				 <li><a href="/pubs/tuts/xml/">XML</a></li>
				</ul>
			   </li>
			   <li><a href="/pubs/wpapers/">White Papers</a></li>
			   <li><a href="/pubs/comment/">Commentary</a></li>
			  </ul>
			 </li>
			 <li><a href="/contact/">Contact</a></li>
			</ul></div>

Ce code proviens du livre de Meyer qu'on m'a gentiement conseillé de lire ici et qui m'a permis d'acquérir les bases en CSS, mais là j'avoue que je bloque. Pourquoi donc

div#nav li.submenu:hover {}

accepte-t'il une couleur d'arrière-plan mais pas une image? Merci
Modifié par lineTo (03 Nov 2006 - 14:45)

Coucou ...

Je n'aimerais pas trop m'avancer mais il me semble qu'IE n'accepte la fonction :hover que sur les liens (balise <a>).
Or, le tien s'applique à un élément de liste (balise <li>), je pense que la source de ton problème provient de là.
Modifié par Cygnus (03 Nov 2006 - 15:55)

Cygnus a écrit :
Coucou ...

Je n'aimerais pas trop m'avancer mais il me semble qu'IE n'accepte la fonction :hover que sur les liens (balise <a>).
Or, le tien s'applique à un élément de liste (balise <li>), je pense que la source de ton problème provient de là.

Je confirme (pour IE6 et antérieurs, en tous cas).

Tout à fait, j'ai omis de préciser que j'appelle le fichier csshover.htc
de cette façon:

body{ behavior: url(csshover.htc)}

le :hover est bien détecté mais l'image d'arrière-plan n'est pas remplacée, une idée?
Modifié par lineTo (03 Nov 2006 - 18:28)

HELP please