[HTML/CSS] Menu horizontal avec plusieurs lignes


#1

Bonjour,

je souhaiterais mettre en place un menu css - javascript horizontal avec menus déroulants. Je suis donc parti d’un tutorial sur alsacreations [smile]

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 [smile]

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="java script:montre();"><a href="" title="Retour à l'accueil">Accueil</a></dt>
  	</dl>
  	
  	<dl>  	
    <dt onmouseover="java script: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="java script: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="java script: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="java script: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="java script:montre();"><a href="" title="Retour à l'accueil">Accueil</a></dt>
  	</dl>
  	
  	<dl>  	
    <dt onmouseover="java script: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>


#2

Salut M@t, peux-tu préciser le langage utilisé dans ton titre ?
Merci :slight_smile:


#3

Selon vous le problème est impossible à résoudre ? :??:


#4

Tu as demandé sur le forum d’Alsa Creation, eux connaissent mieux leurs codes, personnelement j’ai pas le temps de tout relire :s !

Désolé :s !


#5

Ouè j’ai effectivement demande aussi sur le forum d’alsa … mais bon apparement personne ne s’est motivé pour répondre :frowning: