Menu/Sous-menu JS

Bonjour,

J'ai un site avec un menu/sous-menu généré grâce à des requêtes SQL. Le sous-menu est par défaut en visibility:hidden dans mon CSS.


Mon but : Le sous-menu doit s'affiche en fonction de la catégorie choisis, la background doit changer, et un div (texte présentation) doit disparaître.


Mon problème : les catégories disparaissent au fur et a mesure que je clic dessus et les articles n'apparaissent pas dans le sous-menu.


Le PHP/HTML

<div id="Presentation">
	<p id="TextePres">Blablabla			</p>
	</div><!--Fin Presentation-->
	<div id="MenuBas">
		<ul id="menu">
<?php	
		$indcateg=1;
		$sqlcateg="SELECT id_categ, nom_categ, titre_categ, url_photo_categ FROM categorie ORDER BY id_categ ASC";
		$reqcateg=mysql_query($sqlcateg) or die (mysql_error());
			
		while ($valcateg=mysql_fetch_row($reqcateg)){
			$indphoto=1;
?>	
			<li class="titremenu"><a href="#" id="liencateg<?php echo $indcateg;?>" value ="<?php echo $indcateg;?>" onclick="afficher(this)" ><?php echo $valcateg[1];?></a><!--Menu-->
				
				<img style="display:none" fsrc="<?php echo $valcateg[3];?>"/>
				
				<!--Debut sous-menu--><div class="titreArticle" id="titreArticle<?php echo $indcateg;?>" value="<?php echo $indcateg;?>"><?php echo $valcateg[2];?></div>
					
				<div class="fondIcone" id="fondicone<?php echo $indcateg;?>" value="<?php echo $indcateg;?>">
						<ul>
<?php
						$sqlart="SELECT nom_produit, url_photo_prod, ref_produit FROM meta_produit, meta_photo_produit, meta_categorie WHERE meta_produit.id_categ='".$valcateg[0]."' AND meta_produit.id_produit=meta_photo_produit.id_prod AND meta_photo_produit.type_photo_prod='Icone Produit' GROUP BY meta_photo_produit.url_photo_prod";
						$reqart=mysql_query($sqlart) or die (mysql_error());
			
						while ($valart=mysql_fetch_row($reqart)){
?>
							<li id="photoart<?php echo $indphoto;?>"><a href="articles.php"  value="<?php echo $indphoto;?>"><img class="iconeMeta" src="<?php echo $valart[1];?>" alt="<?php echo $valart[2];?>" title="<?php echo $valart[0];?>" /></a></li>
<?php						$indphoto++;							
						} ?>
					</ul>
				</div><!--Fin sous-Menu-->
			</li>
<?php			$indcateg++;
			} ?>
			</ul>	
		</div><!--Fin #MenuBas-->

Le JavaScript

var actifDiv=null; // Div actif, cela nous permettra de supprimer la div avant d'afficher une autre...
function afficher(lien)  
    {  
if(actifDiv==null) actifDiv=document.getElementById("Presentation"); // Dès le départ nous savons que c'est cette DIV que nous voulons remplacer... 
else      
{      
    actifDiv.parentNode.getElementsByTagName("div")[0].style.visibility="hidden";      
    actifDiv.parentNode.getElementsByTagName("div")[1].style.visibility="hidden";     
}     
document.getElementById("Container").style.background="url("+lien.parentNode.getElementsByTagName("img")[0].getAttribute("fsrc")+")"; // Récupération de l'image...  
lien.parentNode.getElementsByTagName("div")[0].style.visibility="visible";      
lien.parentNode.getElementsByTagName("div")[1].style.visibility="visible";    
actifDiv.style.visibility="hidden";  
if(actifDiv==null)     
    document.getElementById("Presentation").style.display="none"; // Dès le départ nous savons que c'est cette DIV que nous voulons remplacer...    
        
 
actifDiv=lien;
}

NB : Je ne suis pas encore à l'aise avec le JavaScript ce qui explique surement mon probleme :)