Discussion :

[Goupo]

Salut à tous,

J'ai suivi le tutoriel sur les menus déroulants. J'ai réussi à faire un menu vertical et j'essaie de le rendre horizontal. Voici mon code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
<ul id="deroulant">
 <li class="onglet">
  <a href="#">Bolas</a>
  <ul class="sousMenu">
   <li><a href="#">Feu</a></li>
   <li><a href="#">Météore</a></li>   
   <li><a href="#">Kiwido</a></li>
  </ul>
 </li>
 <li class="onglet">
  <a href="#">Staff</a>
  <ul class="sousMenu">
   <li><a href="#">Double</a></li>
   <li><a href="#">Simple</a></li>
  </ul>
 </li>
 <li class="onglet">
  <a href="#">Torches</a>
  <ul class="sousMenu">
   <li><a href="#">Swing</a></li>
   <li><a href="#">Torche</a></li>
  </ul>
 </li>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
#deroulant {
 border: 1px #000000 solid;
 width: 400px;
 margin: 0;
}
 
#deroulant li {
 display: inline;
}
#deroulant li.onglet {
 border: 1px #000000 solid;
}
#deroulant .sousMenu {
 display: none;
}
#deroulant .sousMenu li
{
 float: none;
}
#deroulant li:hover > .sousMenu {
 display: block;
}

Mes onglet s'affichent bien alignés, mais lorsque j'en survole un, les suivants se déplacent sous le sousMenu qui se déroule.

Comment je peux faire pour que mes onglet restent tous alignés lorsque j'affiche un sousMenu?

Merci d'avance.

[desert]

Salut,
Tu peux tenter de mettre tes sous-menus en position absolue.
Tu peux aussi jeter un coup d'oeil à la galerie css pour t'inspirer.

[GihefBey]

Bonjour,

Referme ta liste correctement (</ul>).

Essaye

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
#deroulant li {
/*  display: inline;*/
  float: left;
  }

-