Faire un menu horizontal déroulant dans un document xhtml

[babababa_13]

Salut à tous !!!

 

Voilà, je fais appel à votre aide parce que là je galère bien pour faire mon menu déroulant.

 

Je m'explique:

je dois faire un menu déroulant où les parties fixes sont sur la même ligne, et où les sous-menus apparaissent bien sur au dessous.

 

Si c'est pas très clair, en voici un exemple plutôt clair je pense:

Testos

 

Pour information, quoi que j'ai fait jusqu'à présent, je me retrouve toujours avec les parties fixes les unes sous les autres, ce qui s'avèrent être au final un bordel monstre quand les sous-menus apparaissent.

 

Donc si vous pouviez m'aider, ça m'arrangerait.

 

 

Merci d'avance !

[6]

Heuu.... fais voir ton code?

 

Ca pourrait aider

[FreeZou]

Toutes tes parties en float:left, display:inline, avec une width et une height ! :]

[babababa_13]

OK FreeZou je vais tester ça ^^

[FreeZou]

Enfin balance quand même ton code qu'on puisse voir un peu ce que t'as fait, ou l'url.

[babababa_13]

OK voici le code

xhtml,body {background: #000000;  margin: 0%}
h1 {
font-size: 32pt;
font-family: comic sans ms; 
color: blue; 
text-align: center}

h2 {
font-size: 25pt;
font-family: comic sans ms; 
color: green; 
text-align: center}

h3 {
font-size: 25pt;
font-family: comic sans ms; 
color: green;
background: #999999; 
text-align: center}


p {
font-size: 12pt;
font-family: comic sans ms; 
color: #66FF66; 
text-align: left}

ul, ol {
font-size: 12pt;
font-family: comic sans ms;
color: #66FF66; 
text-align: left}

a {text-align: center}

a.dessous span {
display: none;
}

a:hover.dessous span {
display: block; 
position: ********; 

margin-left: 280px; 

width: 710px; 
padding: 2px; 
margin: 0px; 
z-index: 100; 
color: #008000; 
background: black;
font: 12px comic sans ms, sans-serif; 
font-weight:bold;
text-align: center;
}


a.span span {
display: none;
}

a:hover.span span {
display: block; 
position: ********; 

margin-left: 280px; 

width: 710px; 
padding: 2px; 
margin: 0px; 
z-index: 100; 
color: #008000; 
background: black;
font: 12px comic sans ms, sans-serif; 
font-weight:bold;
text-align: center;
}


.center {text-align: center;}

.right {text-align: right;}

#menuDeroulant
{width: 700px;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;}

#menuDeroulant li
{float: left;
width: 300px;
margin: 0;
padding: 0;
border: 0;}

#menuDeroulant .sousMenu
{display: none;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;}

#menuDeroulant .sousMenu li
{float: left;
margin: 0;
padding: 0;
border: 0;
width: 299px;
border-top: 1px solid transparent;
border-right: 1px solid transparent;}

#menuDeroulant li a:link, #menuDeroulant li a:visited
{display: block;
height: auto;
color: #FFFFFF;
background: #0099CC;
margin: 0;
padding: 4px 8px;
border-right: 1px solid transparent;
text-decoration: none;}

#menuDeroulant li a:hover { background-color: #66CCFF; }
#menuDeroulant li a:active { background-color: #5F879D; }

#menuDeroulant .sousMenu li a:link
#menuDeroulant .sousMenu li a:visited
{display: block;
color: #FFF;
margin: 0;
border: 0;
text-decoration: none;
background: transparent;}

#menuDeroulant .sousMenu li a:hover
{background-image: none;
background-color: #33FF00;}

#menuDeroulant li:hover > .sousMenu { display: block; }

Si c'est un peu le bordel, c'est normal. Les feuilles de style j'ai essayé de comprendre hier soir donc c'est un peu récent pour moi ^^

[FreeZou]

et le html !

[babababa_13]

OK voici le xhtml:

(je met juste la partie en question)

 

    <ul class="center" id="menuDeroulant">
   <li>
   <a href="./Pages_libres/Les Consoles de salon.xhtml">Première Partie: Les Consoles de Salon</a>
   <ul class="sousMenu">
   <li><a href="./Pages_libres/Les Consoles de salon.xhtml#origines">Les véritables origines du jeu vidéo</a></li>
   <li><a href="./Pages_libres/Les Consoles de salon.xhtml#succes">Du succès au crash du marché vidéoludique</a></li>
   <li><a href="./Pages_libres/Les Consoles de salon.xhtml#moderne">Les débuts de l'ère moderne</a></li>
   <li><a href="./Pages_libres/Les Consoles de salon.xhtml#nouvelle_ere">Une nouvelle ère: les consoles 16 bits</a></li>
   <li><a href="./Pages_libres/Les Consoles de salon.xhtml#releve">La vraie relève</a></li>
   <li><a href="./Pages_libres/Les Consoles de salon.xhtml#consoles_128">Les consoles 128 bits</a></li>
   <li><a href="./Pages_libres/Les Consoles de salon.xhtml#conclusion">Conclusion</a></li>
   </ul>
   </li>
   <li>
   <a href="./Pages_libres/Le jeu sur PC.xhtml">Seconde Partie: Le jeu Sur PC</a>
   <ul class="sousMenu">
   <li><a href="#">Comment le PC s'est imposé</a></li>
   <li><a href="#">Les premières machines: les 8 bits</a></li>
   <li><a href="#">La relève: les machines 16 bits</a></li>
   <li><a href="#">Le PC</a></li>
   <li><a href="#">Conclusion</a></li>
   </ul>
   </li>
   <li><a href="./Pages_libres/Les Dates clés.xhtml">Les Dates clés</a></li>
   </ul>

[babababa_13]

Personne pour m'éclairer ?

[babababa_13]

Bon finalement dans un éclair de lucidité, j'ai réussi à le mettre comme il fallait à l'horizontal.

 

Par contre je voudrais savoir comment le centrer au milieu de ma page ?