Menu CSS rollover avec Balise SPAN non compatible IE

Bonjour a tous,

j'ai fait un ptit CSS pour un déroulement de menu tout simple.Voila ce que j'obtiens sous FF
http://img293.imageshack.us/img293/6157/rolloverpj4.png

Le probleme est que cela ne fonctionne pas du tout sous FF.
Je rappelle que tous les liens de mon menu doivent fonctionner.
Des que je suis en over au dessus de solutions ,je dois avoir les 2 petits en dessous

Je vous colle le CSS et l'HTML si vous voyez qqchose pour résoudre mon prob de compatibilité IE

CSS:

a.titleinfo{
	    position:relative; 
	    z-index:24;
	    text-decoration:none;}
	
	a.titleinfo:hover{
		z-index:25;}
	
	a.titleinfo span{
		display: none;}
	
	a.titleinfo:hover span{ /* le spans s'affiche juste avec l'état hover*/
	    display:block;
	    position:absolute;
	    top:15px; left:0em; width:167px;
		height:32px;
		padding:0px;
		margin:0px;
		}
	div{
	    z-index:24;
		height:32px;
		 width:167px;
		padding:0px;
		margin:0px;
	}	
	a.produits{
	    display:block;
		text-decoration:none;
		background-image:url(images/btn_solution_sm1_over1.png);
		width:167px;
		height:14px;
	}	
	a.produits:hover{
		text-decoration:none;
		background-image:url(images/btn_solution_sm1_over2.png);
	}			
	a.services{
	    display:block;
		text-decoration:none;
		background-image:url(images/btn_solution_sm2_over1.png);
		width:167px;
		height:18px;
	}	
	a.services:hover{
		text-decoration:none;
		background-image:url(images/btn_solution_sm2_over2.png);
	}	

HTML du MENU

<a href="#"><img src="images/1.png" width="162" height="33" border="0" alt="" /></a>
<a href="#" class="titleinfo"><span><div><a href="zdazazd" class="produits">&nbsp;</a><a href="zzzzzzzz" class="services">&nbsp;</a></div></span><img src="images/2png" width="167" height="33" alt="" border="0" /></a>
<a href="#"><img src="images/3.png" width="169" height="33" alt="" border="0" /></a>

Merci d'avance
Modifié par Joe Le Mort (19 Apr 2007 - 18:03)

Joe Le Mort a écrit :
un déroulement de menu tout simple

Un menu déroulant n'est jamais simple.
Tu as eu l'occasion de lire l'article de Tony Monast sur l'accessibilité des menus de navigation en cascade ? Si non, commence par ça. Tu le trouveras dans les tutoriels d'Alsacréations.

Si tu tiens malgré cette lecture à faire un menu déroulant, ou si tu es obligé de le faire (à chacun sa croix...), tu devras utiliser du Javascript. Vouloir faire l'effet de déroulement via les CSS est illusoire, ne serait-ce que parce que ça ne passera pas dans IE6. Et plus globalement parce que les CSS ne sont pas conçus pour ce genre de choses (afficher/cacher des éléments suite à une action de l'utilisateur).

Florent V. a écrit :


Si tu tiens malgré cette lecture à faire un menu déroulant, ou si tu es obligé de le faire (à chacun sa croix...), tu devras utiliser du Javascript. Vouloir faire l'effet de déroulement via les CSS est illusoire, ne serait-ce que parce que ça ne passera pas dans IE6. Et plus globalement parce que les CSS ne sont pas conçus pour ce genre de choses (afficher/cacher des éléments suite à une action de l'utilisateur).

je te contredis sur ces propos.
regarde par ici

Joe Le Mort a écrit :


je te contredis sur ces propos.
regarde par ici

Oui cette solution de HTML dogs est très connue.
Le problème de taille est qu'elle repose sur une construction complètement invalide : les balises <a> qui contiennent des <tables> et d'autres balises <a>.
C'est très hasardeux et personnellement je le déconseille fortement.

Tu trouveras d'ailleurs beaucoup de sujets à propos de ce menu Suckerfish sur ce forum

En bref, entre :
- utiliser JS parce que c'est son rôle
- bidouiller un truc en CSS avec commentaires conditionnels et structure complètement invalide
... Il vaut mieux y réfléchir à deux fois
Modifié par Raphael (20 Apr 2007 - 14:01)

Salut,

Qu'est-ce qui t'as poussé à vouloir faire un menu déroulant ?

koala64 a écrit :
Salut,

Qu'est-ce qui t'as poussé à vouloir faire un menu déroulant ?

un client tout simplement
Mais je me suis arrangé. je ne passe plus par un menu déroulant, il sera fixe avec un test d'URL.

merci pour vos réponses !