Bonjour à tous, j'ai vu dans un tuto la possibilité d'afficher ou non un bloc en CSS/XTHML.
ayant compris le système, je suis décidé à créer mon menu déroulant. Tout fonctionne pour le mieux sauf le positionnement du bloc.
Je ne trouve pas la solution.
Voici le code CSS

Voici mon code html

Invariablement, le bloc apparait au début du menu malgré des essais avec "position: relative;" ou autre test farfelus.
Merci de votre coup de main

2 Remarques :  
1° les pipes (|) ne doivent pas se retrouver dans ton html (c'est en effet pénible car elle sont lues par un lecteur texte). Même chose pour tes - du deuxième niveau
2° tu n'as pas d'erreur de validation en mettant ta liste dans un span ?  
 
sinon, pour ta question, tes sous-menus doivent être relatifs par rapport au li en question
--> #menu li {position:relative}

merci pour ta réponse rapide !!
- je ne comprend pas bien l'histoire des "|" et "-".
- comment faire la validation dont tu parles ?
- tu as raison pour la relativité des sous-menu, j'ai déjà essayé ta solution mais ça marche pas

Installe l'extension pour firefox "html validator" http://users.skynet.be/mgueury/mozilla/
Cela permet de vérifier si ton code est valide selon le w3c
Là tu as un élément inline (ton span) qui contient un élément block (ton ul), cela engendre une erreur de validation.
Tu devrais donc remplacer ton span par un div, ou voir si tu ne peux pas pas garder le ul uniquement, sans rien autour
 
Dans ton html, tu mets des informations qui ne devrait pas être là.
en effet, les | sont lus, ce n'est pas bon, il devrait apparaitre uniquement par css. Perso, moi j'emploie une bordure sur les li pour séparer les élements de menus.
C'est la même chose pour tes - devant tes éléments de sous menus.
Imagine en plus que ton site est un CMS, cela veux dire que tu dois introduire ces trait d'union pour chaque élément.
 
Bref, ce sont des éléments de décoration, il faut donc les faire en css.
 
 

merci David
ok pour les éléments de déco !! je vais essayé ça, mais pour la bordure sur les LI, comment faire pour le dernier élément (si tu vois ce que je veux dire)
En fait, j'utilise un SPAN car j'ai un autre menu sur la gauche (liste simple avec rollover)... c'est pour les différencier.
je regarde pour la validation W3C.

Deux solutions pour le dernier éléments, mettre la "pipe" sur la bordure de gauche, et jouer avec des marges négatives (un peu chaud)
Plus simplement donner une class "last" au dernier li avec comme proriété border:none
 
Mets plutôt une classe sur les deux ul pour les différencier.

j'essaye tout ça... merci de ton aide

oulala, c'est pas simple tout ça !! mais ça fonctionne presque !!
encore quelques erreurs sur le background de mes td pour la validation W3C
merci David pour ta rapidité et ta patience

Attention, j'espère que tes tables ne sont pas là pour faire le layout, mais uniquement pour afficher des données tabulées

bonjour, désolé mais je ne comprend pas ce que tu veux dire !!
c'est bien ce plug W3C, par contre je vois maintenant que la plupart des sites contiennent bon nombre d'erreur !!
en tout cas merci pour ton astuce pour les pipes.

Je vois que tu dois mettre des background sur des td.  
J'en tire comme conclusion que tu emploies une table.
Je me permettais donc de te rappeller que les tables ne servent pas à faire la mise en page (layout)  
http://openweb.eu.org/articles/problemes_tableaux

hello David,
tu as vu juste... j'utilise en effet des tables pour ma mise en page, car cela fonctionne et je trouve ça plus simple que les DIV (pour l'instant).
C'est un peu de la fainéantise, je l'admets... Je ne comprends pas encore bien comment gérer toute la mise en page avec des DIV+CSS et je trouve ça un peu plus complexe qu'avec des tables même si je découvre les énormes possibilités offertes par CSS.
Tu m'as convaincu, je vais me pencher sur le sujet.
Merci pour tes bons conseils.