Saut de ligne...

tu peux mettre le code stp

voici le long code css :
#menu ul
{
margin:0;
padding:0;
list-style-type:none;
text-align:center;
}

#menu li
{
float:left;
margin:auto;
padding:0;
background-color:black;
}

#menu li a
{
display:block;
width:100px;
color:white;
text-decoration:none;
padding:5px;
}

#menu li a:hover
{
color:#FFD700;
}

#menu ul li ul
{
display:none;
}

#menu ul li:hover ul
{
display:block;
}

#menu li:hover ul li
{
float:none;
}

#menu ul li ul, #menu ul li:hover ul li ul, #menu ul li:hover ul li:hover ul li ul
{
display:none;
}

#menu ul li:hover ul, #menu ul li:hover ul li:hover ul, #menu ul li:hover ul li:hover ul li:hover ul
{
display:block;
width:100px;
color:white;
text-decoration:none;
padding:0px;
margin: 0px;
}

#menu ul li:hover ul li:hover ul
{
margin-left: 100px;
}

et l'HTML aussi stp

le code html :

<div id="menu">
<ul>
<li><a href="#">Boissons</a>
<ul>
<li><a href="#">Limonade</a>
<ul>
<li><a href="#">citron</a></li>
</ul>
</li>
<li><a href="#">Jus</a></li>
<li><a href="#">Sirop</a></li>
</ul>
</li>
<li><a href="#">Confitures</a></li>
</ul>
</div>

Tu veux que citron apparissent en dessous de limonade?

non justement il apparaissait juste au dessous don j'ai mis margin-left: 100px; mais je voudrai que citron soit a droite de limonade.

Tu peux utiliser le JS?

oui pourquoi il y a des contraintes (en fait je suis en train de l'apprendre je ne connais pas encore tout )

Je te publie le code dans 10 minutes

dsl il y a un probleme il faudrait pas faire une liste à puce mais tableau plutôt, je le ferrais tout a l'heure

ok merci beaucoup ^^

Tiens, bon le code est beaucoup plus long et compliqué mais c'est parce que j'ai utilisé le javascript:

Code HTML:

<html> 
 <head> 
  <script type="text/javascript"> 
  function menu (id1, id2, id3, id4) 
  { 
   var id1=document.getElementById(id1); 
   var id2=document.getElementById(id2); 
   var id3=document.getElementById(id3); 
   var id4=document.getElementById(id4); 
   id1.style.display="block"; 
   id2.style.display="block"; 
   id3.style.display="block"; 
   id4.style.display="none"; 
  } 
   
  function limonade (id) 
  { 
   var id4=document.getElementById(id); 
   id4.style.display="block"; 
  } 
   
  function enroule (id1, id2, id3, id4) 
  { 
   var id1=document.getElementById(id1); 
   var id2=document.getElementById(id2); 
   var id3=document.getElementById(id3); 
   var id4=document.getElementById(id4); 
   id1.style.display="none"; 
   id2.style.display="none"; 
   id3.style.display="none"; 
   id4.style.display="none"; 
  } 
  function enroulecitron (id) 
  { 
   var citron=document.getElementById(id); 
    
   citron.style.display="none"; 
  } 
     
  </script> 
 </head> 
 <body> 
  <div id="menu"> 
   <table> 
    <tr> 
     <td class="nul" onMouseover="javascript:enroule('boissons1', 'boissons2', 'boissons3', 'citron')"></td> 
     <td class="nul" onMouseover="javascript:enroule('boissons1', 'boissons2', 'boissons3', 'citron')"></td> 
     <td class="nul" onMouseover="javascript:enroule('boissons1', 'boissons2', 'boissons3', 'citron')"></td> 
    </tr> 
    <tr> 
     <td class="nul" onMouseover="javascript:enroule('boissons1', 'boissons2', 'boissons3', 'citron')"></td> 
     <td class="displayblock"><a href="" onMouseover="javascript:menu('boissons1', 'boissons2', 'boissons3', 'citron')">Boissons</a></td> 
     <td class="displayblock" onMouseover="javascript:enroule('boissons1', 'boissons2', 'boissons3', 'citron')"><a href="">Confitures</a></td> 
    </tr> 
    <tr> 
     <td class="nul" onMouseover="javascript:enroule('boissons1', 'boissons2', 'boissons3', 'citron')"></td> 
     <td style="display:none;" id="boissons1"><a href="" onMouseover="javascript:limonade('citron')">Limonade</a></td> 
     <td id="citron" style="display:none;" onMouseover="javascript:if(citron.style.display='none' { enroule('boissons1', 'boissons2', 'boissons3', 'citron')"><a href="">Citron</a></td> 
    </tr> 
    <tr> 
     <td class="nul" onMouseover="javascript:enroule('boissons1', 'boissons2', 'boissons3', 'citron')"></td> 
     <td id="boissons2" onMouseover="javascript:enroulecitron('citron')" style="display:none;"><a href="">Jus</a></td> 
     <td class="nul" onMouseover="javascript:enroule('boissons1', 'boissons2', 'boissons3', 'citron')"></td> 
    </tr> 
    <tr> 
     <td class="nul" onMouseover="javascript:enroule('boissons1', 'boissons2', 'boissons3', 'citron')"></td> 
     <td id="boissons3" onMouseover="javascript:enroulecitron('citron')" style="display:none;"><a href="">Sirop</a></td> 
     <td class="nul" onMouseover="javascript:enroule('boissons1', 'boissons2', 'boissons3', 'citron')"></td> 
    </tr> 
   </table> 
  </div> 
  </div> 
 </body> 
</html>

merci beaucoup d'avoir répondu, moi je trouve que ca a été rapide, mais il ne fonctionne pas correctement :
dans le css " td.nul " ne fonctionne pas mais j'ai trouvé et j'ai mis .nul td ( je sais pas si c'est déconseillé)
ensuite,
http://hpics.li/5fc9e08
je n'arrive pas a enlever les bandes noires sur les cotés

http://hpics.li/83b85bf
et citron viens encore se placer sous limonade

si tu as encore du temps pour moi je serai heureux de ton aide :)

Bizarre je l'ai testé chez moi ca marche

Tu as bien remplacé TOUT le code CSS que tu m'a envoyé par celui que je t'ai donné?

oui j'ai même créé le fichier a.css

pas besoin lol

je sais mais vu la taille du fichier css pour le reste du site j'ai préferé créer le fichier.

ques que ca donne si tu ne change pas le code (td .nul)

oui c'est normal ca ne marche pas avec la modification que tu a fait mais ca marche tres bien sans

(mon message n'a pas été envoyé --')
en fait ca affiche ca :

http://hpics.li/9f55097

des que je veux acceder a limonade je passe sur confiture donc le volet se ferme.

ca marche si on passe a coté (la le volet ne se ferme pas, mais c'est désarable qu'il reste tant qu'on ne clique pas)