Menu vertical : un mauvais rendu

Bonjour,

Je cross-post ce message déjà envoyé sur CSS/XHTML où il n'a peut-être pas toute sa place.

J'essaie d'utiliser un menu javascript/CSS vertical. Mais le rendu (que l'on peut voir ici), n'est pas bon : sous Firefox, au passage de la souris, il y a un effet de clignotement ; les sous-menus peuvent ne pas s'effacer correctement.

Voici le code java :

function montre(id) {
   if (document.getElementById) {
    document.getElementById(id).style.display="block";
  } else if (document.all) {
    document.all[i d].style.display="block";
  } else if (document.layers) {
    document.layers[i d].display="block";
  } } 
 
 function cache(id) {
   if (document.getElementById) {
    document.getElementById(id).style.display="none";
  } else if (document.all) {
    document.all[i d].style.display="none";
  } else if (document.layers) {
    document.layers[i d].display="none";
  }
  } 

Le CSS :

	.menu {
		border: 1px solid gray;
		float:left;
		position: relative;
		width:170px;
		}

	.menu DL {
		margin-left:auto;
		margin-right:auto;
		width:160px;
		z-index:1;
		}

	.menu DT {
		background:#CDCDCD;
		border:1px solid gray;
		cursor:pointer;
		height:20px;
		line-height: 20px;
		margin:2px 0;
		padding:0 0 0 3px;
		z-index:1;
		}

	.menu DD {
		background:#CDCDCD;
		border:1px solid gray;
		display:none;
		left:100px;
		margin-top:-7px;
		position: absolute;
		width:160px;
		z-index: 100;
		}

	.menu UL {
		list-style-type: none;
		margin: 0;
		padding: 2px;
		}

	.menu LI {
		height: 18px;
		line-height: 18px;
		margin:0 3px 0 3px;
		}

	.menu LI A, .menu DT A {
		font-style:normal;
		text-decoration: none;
		}

	.menu FORM{
		background-color: #f2f2f2;
		border: 1px solid #909090;
		color: #505030;
		font-family: Verdana;
		font-weight: normal;
		margin-top:5px;
		width:160px;
		}

Le HTML simplifié (avec boucle SPIP [type PHP]) :

<div class="menu">
<dl>
	<BOUCLE_menu_rubrique(RUBRIQUES){meme_parent}{par num titre}>
	<dt onmouseover="javascript:montre('smenu[(#ID_RUBRIQUE)]');" onmouseout="javascript:cache('smenu[(#ID_RUBRIQUE)]');"><a href="[(#URL_RUBRIQUE)]">[(#TITRE|supprimer_numero)]</a></dt>
	<dd id="smenu[(#ID_RUBRIQUE)]" onmouseover="javascript:montre('smenu[(#ID_RUBRIQUE)]');" onmouseout="javascript:cache('smenu[(#ID_RUBRIQUE)]');">
		<ul>
		<BOUCLE_menu_ssrubrique(RUBRIQUES){id_parent}>				
			<li><a href="[(#URL_RUBRIQUE)]">[(#TITRE|supprimer_numero)]</a></li>
		</BOUCLE_menu_ssrubrique>
		</ul>
	</dd>
	</BOUCLE_menu_rubrique>
</dl>
<form action="recherche.php3" method="get">
	<input type="text" name="recherche" size="15" maxlength="50">
	<input type="submit" value="ok">
</form>
</div>

J'ai réalisé pas mal de tests. Rien de bien concluant.

Des idées pour améliorer ?

Cordialement,

GS.

Le problème est bien expliqué. Je me demande si j'ai les compétences en JS pour venir à buot de ce truc là...

Intéressant, tout de même.

Au passage, cher Elmoustiko, je te signale qu'avec mon IE6, le menu que tu donnes en exemple ne fonctionne pas.

[Au passage, cher moi-même, tu devrais regarder TOUTES la seconde page d'un post quand il y en a deux, cela t'éviterai de dire trop de bêtises...]
Modifié le 26 Nov 2004 - 20:56

Mort de rire

Je sais même plus sur quoi il est compatible, et sur quoi il ne l'est pas le menu ça fait un bout de temps que j'y ai pas retouché, mais je pense que je le finirais (et le developperais pour versions horizontales, verticales, hover, click, onfocus si c'est possible) un de ces 4 !