Saut de ligne...

(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)

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

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

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

pas besoin lol

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

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é?

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 :)

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>

ok merci beaucoup ^^

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

Je te publie le code dans 10 minutes

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

Tu peux utiliser le JS?

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 veux que citron apparissent en dessous de limonade?

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>

et l'HTML aussi 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;
}

tu peux mettre le code stp