menu déroulant 2 niveaux en css: prb de décalage

[jerome2]

Bonjour à tous,

voilà je veux faire une menu déroulant à 2 niveaux (je me suis inspiré pour celà des fameux Suckerfish Dropdowns).

Là où je calle c'est que je voudrai que les premiers sousmenu s'affichent en vertical (en poussant les titres principaux vers le bas) et que les sous-sousmenu eux s'affichent sur la droite du menu.

Pour l'instant les sousmenu s'affichent bien en vertical mais ils cachent les titres principaux au lieu de les pousser, du coup mon menu est illisible !!

Voilà si qqun peut m'aider sur ce coup là.....

le code html:

<ul id="menu">

   <li>

	<a href="#">activites</a>

	<ul id="smenu">

	  <li>

		<a href="#">activités artistiques <img src="triangle.gif"></a>

		<ul id="menu">

		  <?php

									  $resultat=mysql_query("select*from activites where groupe like 1",$connexion);

									  $nb=mysql_num_rows($resultat);

									  for ($i=0;$i<$nb;$i++)

									  {

									  $nom=mysql_result($resultat,$i,"nom");

									  $adressepage=mysql_result($resultat,$i,"adressepage");

									  echo "<li><a href=$adressepage>$nom</a></li>\n";

									  }

									  ?>

		</ul>

	  </li>

	  <li>

		<a href="#">danse <img src="triangle.gif"></a>

		<ul id="menu">

		  <?php

									  $resultat=mysql_query("select*from activites where groupe like 2",$connexion);

									  $nb=mysql_num_rows($resultat);

									  for ($i=0;$i<$nb;$i++)

									  {

									  $nom=mysql_result($resultat,$i,"nom");

									  $adressepage=mysql_result($resultat,$i,"adressepage");

									  echo "<li><a href=$adressepage>$nom</a></li>\n";

									  }

									  ?>

		</ul>

	  </li>

	  <li>

		<a href="#">activités physiques <img src="triangle.gif"></a>

		<ul id="menu">

		  <?php

									  $resultat=mysql_query("select*from activites where groupe like 3",$connexion);

									  $nb=mysql_num_rows($resultat);

									  for ($i=0;$i<$nb;$i++)

									  {

									  $nom=mysql_result($resultat,$i,"nom");

									  $adressepage=mysql_result($resultat,$i,"adressepage");

									  echo "<li><a href=$adressepage>$nom</a></li>\n";

									  }

									  ?>



		</ul>

	  </li>

	  <li>

		<a href="#">activités techniques <img src="triangle.gif"></a>

		<ul id="menu">

		  <?php

									  $resultat=mysql_query("select*from activites where groupe like 4",$connexion);

									  $nb=mysql_num_rows($resultat);

									  for ($i=0;$i<$nb;$i++)

									  {

									  $nom=mysql_result($resultat,$i,"nom");

									  $adressepage=mysql_result($resultat,$i,"adressepage");

									  echo "<li><a href=$adressepage>$nom</a></li>\n";

									  }

									  ?>



		</ul>

	 </li>

	</ul>

  </li>

  <li>

	<a href="#">manifestations</a>

	<ul id="menu">

	  <li><a href="actualite.php">à venir</a></li>

	  <li><a href="archives.php">archives</a></li>



	</ul>

  </li>

  <li>

	<a href="#">cinéma</a>

	<ul id="menu">

	  <li><a href="films.php">les films du mois</a></li>

	  <li><a href="#">films précédents</a></li>



	</ul>

  </li>

  <li>

	<a href="#">publications</a>

	<ul id="menu">

	  <li><a href="vermay.php">vermay</a></li>

	  <li><a href="#">le jourmalt</a></li>

	</ul>

  </li>

  <li>

	<a href="#">informations</a>

	<ul id="menu">

	  <li><a href="association.php">association</a></li>

	  <li><a href="#">inscriptions</a></li>

	  <li><a href="contacts.php">contacts</a></li>

	  <li><a href="acces.php">plan d'accès</a></li>

	  <li><a href="horaires.php">heures d'ouvertures</a></li>

   </ul>

  </li>



</ul>

et le css:

#menu, #menu ul {

padding: 0;

margin: 0;

list-style: none;

line-height: 1;

}

#menu a {

display: block;

width: 10em;

text-decoration: none;

color: white;

font-weight: bold;

font-family: Verdana, Geneva, Arial, sans-serif;

}



/* le menu principal */

#menu li {

width: 14em;

height: 30px;

background: #a490de;

border: 1px solid grey;

}



/* les sous-menus */

#menu li ul {

	position: absolute;

	width: 14em;

	height: 30px;

	left: -999em;

}

#menu li:hover ul {

		position: relative;

	left: auto;

	width: 14em;

	height: 30px;

}

#menu li:hover ul, #menu li.sfhover ul {

	left: auto;

}





/* décale le ssmenu vers la droite */

#menu li ul ul {

	margin: -1em 0 0 10em;

}

/* cache le ssmenu */

#menu li:hover ul ul, #menu li.sfhover ul ul {

	position: absolute;

		left: -999em;

}

/* montre le ssmenu */

#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul {

		left: auto;

}

là je suis vraiment bloqué alors si qqun pouvait m'aider ça serait super cool merci !!

[Cygnus]

Bonjour,

Je pense que le tutoriel Alsacreations - menu déroulant réponds tes attentes

[jerome2]

merci cygnus,

mais ce menu ne propose qu'un décalage sur la droite, et il n'y a pas le premier sous menu qui pousse les éléments du menu principal....tu me suis ?

le décalage sur la droite c'est bon pour mon sous-sous menu, mais l'originalité que je voulais donner à mon menu c'était d'afficher le sous menu à la place des titres principaux, et les sous-sous menu décalé à droite

si qqun comprend ce que je cherche....

[Cygnus]

Euh ...

Je crois qu'une illustration ne serait pas superflue !

[HoRuSs]

Je comprend pas trop, mais ca peut-être intéressant j'attend l'illustration....

[jerome2]

ok,

alors le premier niveau de sous menu doit s'afficher comme ça:

http://css.alsacreations.com/xmedia/exempl...nu-vertical.htm

et le second niveau (qui s'affiche au passage de la souris sur le premier sous menu) doit s'afficher comme ça:

http://css.alsacreations.com/xmedia/exempl...nt/cssmenu4.htm

voilà, peut être qu'il faut ajouter un deuxième javascript, je sais pas...j'attend vos propositions

[Cygnus]

Si tu veux faire une imbrication des deux menus, commence par reprendre la base du premier qui t'est fournie.

Puis, tu remplaces les <li><a>..</a></li> par des <li><ul>...</ul></li> contenant ton second sous-menu.

Pour agencer le premier, tu reprends le code fourni dans le premier exemple.

Et pour le second, celui fournit dans le deuxième exemple.

Et ça devrait le faire

[jerome2]

ok merci Cygnus, j'ai fait ce que tu me conseillai (enfin je crois), mais le problème c'est que comme mes sous-sous menu sont imbriqués dans les sous menu, ils s'ouvrent en même temps que les sous menu alors que je voudrais qu'ils ne soient visibles qu'au passage de la souris sur les sous-menu.

De plus, les différents sous-menu sont anormalement écartés car le navigateur ne les affiche qu'à la suite du block de sous-sous menu.

à l'aide je galère !!!

j'ai mis mon essai en ligne pour qu'il soit un peu plus compréhensible quand même:

http://www.malt77.com/test.php