Bug affichage menu CSS

Bonjour à tous,

je souhaite réaliser une menu en css horizontal à 2 niveaux :
- le premier niveau est constitué d'images
- le 2ème niveau est un simple texte et s'affiche en fonction du passage de la souris sur les images du niveau 1

je me suis basée sur cet exemple :

[/url]http://mickael.upload.free.fr/Menu_sansimages.htm
jusqu'ici pas de problème :

j'ai réalisé ce menu :
http://mickael.upload.free.fr/menu1.html
le problème est le suivant :
à chaque chargement de la page ou actualisation, les titres de niveau2 se superposent et forment une espèce de gribouille , qui ne fait pas du tout fini ...

pour bien le bug, cliquer sur le bouton actualiser de la page.
évidemment la durée de la superposition varie en fonction de différents paramètres ( débit de l'internaute,temps de réponse ...)

mon site sera géré dynamiquement , et donc pour chaque page le menu est rechargé, donc l'effet réapparait :

voici le code , vous pouvez également le récupérer en enregistrant la page et en affichant la source sous votre éditeur :


code style css

<!-- style menu -->

#menu {background-color: #e2e2e2; position: absolute; top:210px; width:900px;  margin-top:0; left: 50px;  margin:0;padding:0; }
#menu dl {float: left ; margin:0;padding:0;}
#menu li {display: inline; padding-right:4px; padding-left:4px}

#menu li a { color: #616161; text-decoration: none; display:inline; }
#menu li a:hover { color: #616161;text-decoration: underline; }
#menu a#menuimg1 {  text-decoration: none; background:url(./images/titre1.jpg); display:block; height:32px; width:113px; margin:0px;padding:0px; }
#menu a#menuimg1:hover{  background-position:0 -32px; }

#menu a#menuimg2 {  text-decoration: none; background:url(./images/titre2.jpg); display:block; height:32px; width:89px; margin:0px;padding:0px}
#menu a#menuimg2:hover{ background-position:0 -32px;}

#menu a#menuimg3 {text-decoration: none; background:url(./images/titre3.jpg);display:block; height:32px; width:107px; margin:0px;padding:0px}
#menu a#menuimg3:hover{  background-position:0 -32px;}

#menu a#menuimg4 {text-decoration: none; background:url(./images/titre4.jpg);display:block; height:32px; width:123px; margin:0px;padding:0px}
#menu a#menuimg4:hover{ background-position:0 -32px; }

#menu a#menuimg5 {text-decoration: none; background:url(./images/titre5.jpg);display:block; height:32px; width:125px; margin:0px;padding:0px}
#menu a#menuimg5:hover{ background-position:0 -32px;}

#menu a#menuimg6 {text-decoration: none; background:url(./images/titre6.jpg);display:block; height:32px; width:114px; margin:0px;padding:0px}
#menu a#menuimg6:hover{background-position:0 -32px; }

#menu a#menuimg7 {text-decoration: none; background:url(./images/titre7.jpg);display:block; height:32px; width:169px; margin:0px;padding:0px}
#menu a#menuimg7:hover{background-position:0 -32px; }



#smenu1 {font-size: 0.8em; left: 0px; width: 800px; position: absolute}
#smenu2 {font-size: 0.8em; left: 0px; width: 800px; position: absolute}
#smenu3 {font-size: 0.8em; left: 0px; width: 800px; position: absolute}
#smenu4 {font-size: 0.8em; left: 0px; width: 800px; position: absolute}
#smenu5 {font-size: 0.8em; left: 0px; width: 800px; position: absolute}
#smenu6 {font-size: 0.8em; left: 0px; width: 800px; position: absolute}
#smenu7 {font-size: 0.8em; left: 0px; width: 800px; position: absolute}
</style>

et le code de la page

	<DIV id="menu">
<DL>
  <DT onMouseOver="montre('smenu1');"><A href="http://#" id="menuimg1"></A> </DT>
  <DD id=smenu1 >
  <UL>
    <LI><A href="http://#">Sous-menu 1.1</A> 
    <LI><A href="http://#">Sous-menu 1.2</A> 
    <LI><A href="http://#">Sous-menu 1.3</A> </LI></UL></DD></DL>
<DL>
  <DT onMouseOver="montre('smenu2');"><A href="http://#" id="menuimg2"></A> </DT>
  <DD id=smenu2 >
  <UL>
    <LI><A href="http://#">Sous-menu 2.1</A> 
    <LI><A href="http://#">Sous-menu 2.2</A> </LI></UL></DD></DL>
<DL>
  <DT onMouseOver="montre('smenu3');"><A href="http://#" id="menuimg3"></A> </DT>
  <DD id=smenu3>
  <UL>
    <LI><A href="http://#">Sous-menu 3.1</A> 
    <LI><A href="http://#">Sous-menu 3.2</A> 
    <LI><A href="http://#">Sous-menu 3.3</A> 
    <LI><A href="http://#">Sous-menu 3.4</A> 
    <LI><A href="http://#">Sous-menu 3.5</A> </LI></UL></DD></DL>
<DL>
  <DT onMouseOver="montre('smenu4');"><A href="http://#" id="menuimg4"></A> </DT>
  <DD id=smenu4>
  <UL>
    <LI><A href="http://#">Sous-menu 4.1</A> 
    <LI><A href="http://#">Sous-menu 4.2</A> 
	<LI><A href="http://#">Sous-menu 4.3</A> </LI></UL></DD></DL>
<DL>	
<DT onMouseOver="montre('smenu5');"><A href="http://#" id="menuimg5"></A> </DT>
  <DD id=smenu5>
  <UL>
    <LI><A href="http://#">Sous-menu 5.1</A> 
    <LI><A href="http://#">Sous-menu 5.2</A> 
	<LI><A href="http://#">Sous-menu 5.3</A> </LI></UL></DD></DL>
		
<DL>	
<DT onMouseOver="montre('smenu6');"><A href="http://#" id="menuimg6"></A> </DT>
  <DD id=smenu6>
  <UL>
    <LI><A href="http://#">Sous-menu 6.1</A> 
    <LI><A href="http://#">Sous-menu 6.2</A> 
	<LI><A href="http://#">Sous-menu 6.3</A> </LI></UL></DD></DL>
	
	
	<DL>	
<DT onMouseOver="montre('smenu7');"><A href="http://#" id="menuimg7"></A> </DT>
  <DD id=smenu7>
  <UL>
    <LI><A href="http://#">Sous-menu 7.1</A> 
    <LI><A href="http://#">Sous-menu 7.2</A> 
	<LI><A href="http://#">Sous-menu 7.3</A> </LI></UL></DD></DL>
</div>

et le code javascript

<SCRIPT type=text/javascript>
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</SCRIPT>

aidez moi, quelqu'un aurait il une solution ??

merci d'avance, !!!
Modifié par jaenani (02 May 2006 - 10:51)

ou quelqu'un pourrait me dire à quoi cela est du ?