Problème menu déroulant

Bonjour/soir,

J'ai un petit problème. J'ai voulu faire un menu déroulant horizontal. L'idée: Lorsqu'on passe la souris sur le lien, ça "déroule" les vrais liens cliquables. Votre tuto est très clair, j'ai réussi à créer ce type de menu.

Je me retrouve donc avec un menu sur la gauche, où est mélangé des liens "directs", et des liens cachés dans des menus déroulants. Aucun problème lorsque je clique sur les liens normaux, en revanche, lorsque je clique sur les liens des menus déroulants, une fois la page affichée, la "case" des liens normaux voit sa hauteur s'être agrandie de quelques (nombreux) pixels. Je vois d'ailleurs de remarquer à l'instant que la hauteur de ces cases de liens correspond à la hauteur de la fenêtre de Firefox (testé sur deux pc qui n'ont pas la même résolution). Sûrement une piste.

Sous IE7, j'ai un autre problème. Losque je clique sur ces liens, je n'ai pas le problème rencontré sous firefox, en revanche le site vient se coller sur la gauche (alors qu'il devrait être centré).

Bref, ça me perturbe, et je trouve étrange d'avoir deux conséquences aussi différentes juste en changeant de naviguateur.

Sous IE6 je ne peux pas cliquer sur les liens du menu déroulant. =[

Le code ressemble à cela:

Menu

<dl [#red]id[/#]="menu">

<dt [#red]onmouseover[/#]="javascript:montre();"><a [#red]href[/#]="index.php">[#black]Accueil[/#]</a></dt>
		
<dt [#red]onmouseover[/#]="javascript:montre('smenu1');">Menu</dt>
	<dd [#red]id[/#]="smenu1" [#red]onmouseover[/#]="javascript:montre('smenu1');" [#red]onmouseout[/#]="javascript:montre('');">
		<ul>
			<li><a [#red]href[/#]="menu1.php.php">[#black]Menu1[/#]</a></li>
			<li><a [#red]href[/#]="menu2.php">[#black]Menu2[/#]</a></li>
		</ul>
	</dd>	

Le css:

#conteneur {
	width: 600px;
	margin: auto;
}

p {
	text-align: justify;
}

body {
padding: 0;
background: #ffffd9;
font: 70% verdana, arial, sans-serif;
}

dl, dt, dd, ul, li {
margin: 0;
padding: 3px;
list-style-type: none;
text-align: justify;
}

#menu {
width: 170px;
margin-top: 5px;
z-index:100;
}

#menu dl {
float: left;
width: 12em;
}

#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ffffd9;
border-bottom: 1px dashed orange;
border-right: 1px dashed orange;
color: #7d166e;
padding: 10px;
}

#menu dd {
display: none;
border-right: 1px dashed orange;
border-bottom: 1px dashed orange;
}

#menu li {
text-align: center;
background: #fffee6;
}

#menu li a, #menu dt a {
color: #7d166e;
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: #ffae00;
}

#contenu {
	float: left;
	width: 400px;
	padding: 10px;
}

#menufloat {
	float: left;
}

#header {
	border-bottom: 1px dashed orange;
}

.textcolor {
	color: #a533be;
}

Le code mis dans les pages de contenu ressemblent à ça:

<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>

En espérant que vous pourrez m'aider, et en vous remerciant d'avance,


Lyli =p
Modifié par Lyli (14 Jan 2008 - 01:26)

Je me permet un petit up. Personne n'aurait une piste ? :x