Menu horizontal : problème avec plusieurs lignes

Bonjour,

je souhaiterais mettre en place un menu css - javascript horizontal avec menus déroulants. Je suis donc parti de l'excellent tutorial de ce site

Par contre je voudrais que le menu ne soit pas limité à un certain nombre d'items ... c'est à dire que si la ligne courante du menu est complète, qu'une nouvelle ligne de menu soit ajoutée.

Le problème est que le bloc des menus déroulants est au même niveau que les menus au même ... donc quand on déroule un menu de la ligne au dessus, les menus de la ligne du bas se décalent.

Voici deux captures d'écran illustrant le problème, vous allez tout de suite voir le souci:

[img=http://img185.imageshack.us/img185/7580/probleme2vx3.th.jpg]

[img=http://img166.imageshack.us/img166/5511/probleme1it9.th.jpg]


J'ai essayé de régler ça avec un z-index pour essayer de faire passer les menus déroulants au dessus des menus mais sans succès.

Est-ce que vous auriez une idée pour régler ce problème ?

Merci d'avance pour vos réponses

Voilà le code css correspondant au menu :

/*************************************** css menu horizontal ************************************/

dl, dt, dd, ul, li {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
#menu {
	
	position: absolute;
	top: 0;
	left: 0;
	z-index:100;
	width: 100%;
}
#menu dl {
	float:left;
	
	width: 12em;
	margin: 0 1px;
	
}
#menu dt {
	cursor: pointer;
	text-align: center;
	font-weight: bold;
	background: #ccc;
	border: 1px solid gray;
	z-index:1;
}
#menu dd {
	clear:both;
	z-index:2;
	border: 1px solid gray;
	
}
#menu li {
clear:both;
	text-align: center;
	background: #fff;
	
}
#menu li a, #menu dt a {
clear:both;
	color: #000;
	text-decoration: none;
	display: block;
	height: 100%;
	border: 0 none;
	
}
#menu li a:hover, #menu dt a:hover {
	background: #eee;
	
}

Et voici le html :

<div id="menu">

			<dl>
				<dt onmouseover="javascript:montre();"><a href="" title="Retour à l'accueil">Accueil</a></dt>
			</dl>
			
			<dl>			
				<dt onmouseover="javascript:montre('smenu1');">Menu 1</dt>
					<dd id="smenu1">
						<ul>
							<li><a href="#">Sous-Menu 1.1</a></li>
		
							<li><a href="#">Sous-Menu 1.2</a></li>
							<li><a href="#">Sous-Menu 1.3</a></li>
							<li><a href="#">Sous-Menu 1.4</a></li>
							<li><a href="#">Sous-Menu 1.5</a></li>
							<li><a href="#">Sous-Menu 1.6</a></li>
						</ul>
		
					</dd>
			</dl>
			
			
			<dl>	
				<dt onmouseover="javascript:montre('smenu2');">Menu 2</dt>
					<dd id="smenu2">
						<ul>
							<li><a href="#">Sous-Menu 2.1</a></li>
							<li><a href="#">Sous-Menu 2.2</a></li>
		
							<li><a href="#">Sous-Menu 2.3</a></li>
							<li><a href="#">Sous-Menu 2.4</a></li>
						</ul>
					</dd>
			</dl>
			
			<dl>	
				<dt onmouseover="javascript:montre('smenu3');">Menu 3</dt>
					<dd id="smenu3">
		
						<ul>
							<li><a href="#">Sous-Menu 3.1</a></li>
							<li><a href="#">Sous-Menu 3.2</a></li>
							<li><a href="#">Sous-Menu 3.3</a></li>
							<li><a href="#">Sous-Menu 3.4</a></li>
							<li><a href="#">Sous-Menu 3.5</a></li>
		
						</ul>
					</dd>
			</dl>
			
			<dl>	
				<dt onmouseover="javascript:montre('smenu5');">Menu 5</dt>
					<dd id="smenu5">
						<ul>
							<li><a href="#">Sous-Menu 4.1</a></li>
		
							<li><a href="#">Sous-Menu 4.2</a></li>
							<li><a href="#">Sous-Menu 4.3</a></li>
						</ul>
					</dd>
			</dl>
			<dl>
				<dt onmouseover="javascript:montre();"><a href="" title="Retour à l'accueil">Accueil</a></dt>
			</dl>
			
			<dl>			
				<dt onmouseover="javascript:montre('smenu6');">Menu 6</dt>
					<dd id="smenu6">
						<ul>
							<li><a href="#">Sous-Menu 1.1</a></li>
		
							<li><a href="#">Sous-Menu 1.2</a></li>
							<li><a href="#">Sous-Menu 1.3</a></li>
							<li><a href="#">Sous-Menu 1.4</a></li>
							<li><a href="#">Sous-Menu 1.5</a></li>
							<li><a href="#">Sous-Menu 1.6</a></li>
						</ul>
		
					</dd>
			</dl>
</div>

Personne n'a d'idées ?

J'ai essayé pas mal de trucs mai à chaque fois j'obtiens le même résultat, le décallage des menus de la deuxième ligne lorsque je déroule un menu de la première ligne?

Personne n'a jamais eut à réaliser un menu horizontal sur plusieurs lignes ?? Si vous pensez que je devrais employer une méthode radicalement différente, je suis preneur aussi !

Merci d'avance pour votre aide

Euh mais mon problème ne peut-il pas être résolu que personne ne souhaite s'exprimer ?
Modifié par m@t (19 Dec 2006 - 18:57)

J'ai également cherché un site proposant ce genre de menu horizontal sur plusieurs lignes pour m'en inspirer mais malheureusement je n'en ai pas trouvé ...

Est-ce que quelqu'un se rapelle en avoir vu un ?