Afficher / masquer des calques

Bonjour,

J'ai réalisé un menu dans le lequel les liens font apparaître un titre lorsqu'on les survole. Pour cela, je me suis servie du tuto "Afficher / Masquer des calques sans javascript" que l'on trouve sur ce site.

Tout fonctionnait très bien avec IE, Mozilla, Firefox, Opéra et Netscape.
Le problème c'est que j'ai fait une erreur dans le code, qui n'est pas passé à la validation du W3C.
J'ai oublié de prendre en compte qu'il ne faut pas imbriquer des balises block dans des balises en-ligne. En l'occurence, j'ai imbriqué une balise <h1> dans une balise <span>.

J'ai essayé de rectifier en remplaçant ma balise <h1> par une balise <a>.
Ca fonctionne avec IE et Opéra, mais pas avec Mozilla, Firefox et Netscape.

Si quelqu'un peut m'éclairer sur le sujet et m'aider à trouver une solution, ça m'arrangerait bien car je sais pas trop comment m'y prendre.


Pour mieux comprendre, voici le code (j'ai volontairement laissé la balise <h1> pour les liens, excepté pour le "lien 2" où je l'ai remplacée par une balise <a> dont la classe se nomme titrelien).

code html :

<div id="fondmenu">
	<ul id="menu">
		<li><a class="lien1" href="">Lien 1 | </a></li>
		<li><a class="liens" href="">Lien 2<span><a class="titrelien">Titre lien 2</a></span> | </a></li>
		<li><a class="liens" href="">Lien 3<span><h1>Titre lien 3</h1></span> | </a></li>
		<li><a class="liens" href="">Lien 4<span><h1>Titre lien 4</h1></span> | </a></li>
		<li><a class="liens" href="">Lien 5<span><h1>Titre lien 5</h1></span></a></li>
	</ul>
</div>	

<div id="titre"><h1>Titre lien 1</h1></div>

code css :

#fondmenu {	margin:0 auto; /* obligé de le laisser, sinon marges sous mozilla, firefox, opera, netscape */
			margin-left: 0;
			background-color: yellow;
			width: 618px;
			height: 54px;

			}

	ul#menu {	padding: 0;
			margin:0 auto; /* obligé de le laisser, sinon marges sous mozilla, firefox, opera, netscape */
			position: absolute;
			margin-left: 0;
			text-align:center;
			width: 38em;
			height: 54px;
			
			}

	ul#menu li {	display:inline;
			text-decoration: none;

			}

	a.lien1 {	text-decoration: none;
			font: bold 0.93em/54px Verdana, sans-serif;
			color: orange;

			}

	a.lien1:hover {	text-decoration: none;
			font: bold 0.93em/54px Verdana, sans-serif;
			color: orange;

			}

	a.liens {	text-decoration: none;
			font: 0.93em/54px Verdana, sans-serif;
			color: black;

			}

	a.liens:hover {	color: blue;

				}
	a 	{	/* obligé de laisser pour IE */ 
			text-decoration: none; 
			font: 0.93em/54px Verdana, sans-serif;
			color: black;
			
			}

	a:hover   {	/* obligé de laisser pour IE */
			background: none; /* correction d'un bug IE */
			font: 0.93em/54px Verdana, sans-serif;
			color: black;
			
			}

	a span 	{ 	display: none;

			}

	a:hover span { /* définition de la balise <span> au survol */
			display: inline;
			position: absolute;
			top: 54px; 
			left: 0;
			background-color: black;
			width: 618px;
			height: 108px;
			
			}

	#titre	{	margin:0 auto; /* obligé de le laisser, sinon marges sous mozilla, firefox, opera, netscape */
			margin-left: 0;
			background-color: orange;
			width: 618px;
			height: 108px;

			}

	h1	{	margin-left: 100px;
			margin-top: 0px;
			margin-bottom: 0px;
			text-align: left;
			font: 50px/100px "Franklin Gothic Demi Cond", "Gill Sans Condensed", Verdana, sans-serif;
			color: white;

			} 

	a.titrelien { 	display: block;
			margin-left: 100px;
			margin-top: 0px;
			margin-bottom: 0px;
			text-align: left;
			font: 50px/100px "Franklin Gothic Demi Cond", "Gill Sans Condensed", Verdana, sans-serif;
			color: white;

			}