'tits bugs sur un menu déroulant horizontal

Hello,
Suis nouveau ici, donc tout d'abord, coup de chapeau à Alsacréation, ses forums que je lis depuis deux ans et demi et son fameux "CSS2" qui est ma petite bible en CSS qui m'a bien fait avancer!

Il y a quelques mois déjà, j'ai adapté le menu déroulant horizontal proposé ici:
http://css.alsacreations.com/xmedia/exemples/deroulant/menu-horizontal.htm
à un site en Spip pour lequel l'assoc' cliente désirait ce type de présentation.

J'ai bien sûr dû utiliser une "boucle", base de l'appe dynamiquel de données extraites par Spip dans la BD. J'ai, dans un éclair de lucidité , réussi à afficher en absisse les rubriques, et dans la partie déroulée leurs sous-rubriques.

A voir ici: http://www.observatoirecitoyen.be/

Si la solution convient dans la pluspart des cas, sur certains IE et certains FF, cela bugge... parfois. Je ne suis pas programmeur pour un sou donc j'appelle les experts du cru!

Les deux points que je dois corriger:

1) Principalement, le bug est une perte du menu déroulé en le survolant. Parfois, il ne s'efface pas en sortant du survol. Comment rendre le menu plus compaptible pour le surfer lambda?

2) Il y a une rubrique qui ne contient qu'un sous-menu: une fois survolée, elle ne disparaît jamais. (sauf au refresh). J'ai cherché et demandé à deux bidouilleurs en JS, mais là je butte. Une idée pour débugger cela?
Bien évidemment, je veux conserver le côté dynamique du menu, car si par ex les admins du spip ajoutaient une rubrique ou une s-rubr, elle apparaîtra sans devoir retoucher au design.

Je vous sers ci-dessous les codes html (contenant les balises et appels en spip) et CSS (la partie menu dumoins, je vous évite mon Km de code)

Merci d'avance, les gars! Et puis si Raphaël me lit: BigUp!

Rutabaga

JS

<script type="text/javascript">
<!--
window.onload=show;
function show(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>

html

<div id="menu">

<BOUCLE_rubriques(RUBRIQUES) {racine} {par titre}>
<dl>		
<dt onmouseover="javascript:show('smenu#ID_RUBRIQUE');"><a href="#URL_RUBRIQUE" [title="(#DESCRIPTIF|textebrut|entites_html)"]>[(#TITRE|supprimer_numero)]</a></dt>
<dd id="smenu#ID_RUBRIQUE" onmouseover="javascript:show('smenu#ID_RUBRIQUE');" onmouseout="javascript:show('');">
<BOUCLE_sous_rubriques(RUBRIQUES) {id_parent} {par titre}>
<ul>
[<li><a href="#URL_RUBRIQUE">(#TITRE)</a></li>]
</ul>
</BOUCLE_sous_rubriques>
</dd>
</dl>
</BOUCLE_rubriques>
</div>

CSS

dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}

#menu {
	position: absolute;
	left: 0;
	z-index:100;
	width: 100%;
	height: 4 em;
	font-size: 0.9em;
}
#menu dl {
float: left;
width: 19%;
}
#menu dt {
	cursor: pointer;
	text-align: center;
	font-weight: bold;
	background: #666699;
	margin: 1px;
	padding-top: 2px;
	padding-bottom: 3px;
	padding-right: 2%;
	padding-left: 2%;
}
#menu dd {
display: none;
}
#menu li {
	text-align: center;
	background: #5A5A87;
	border-top: 1px solid #A6A6C4;
	padding-top: 1px;
	padding-bottom: 2px;
}
#menu li a, #menu dt a {
color: white;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
color: #E1A6A6;
}

(je crois bien que tout est là ^^)

Bonsoir,

Le premier problème que je vois est que dans votre boucle Javascript, vous itérez de 1 à 10 :

for (var i = 1; i<=10; i++) {

alors que sur le site les identifiants ne sont pas forcément compris entre 1 et 10.

Autres chose, dans les évènements Javascript "en ligne" (attributs onmouseover, onmouseout, ...), le javascript: au début est incorrect, il faut l'enlever.

Bon courage !
Modifié par Eldebaran (15 Nov 2006 - 23:46)