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 ! :p

[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&egrave;re Partie: Les Consoles de Salon</a>
    <ul class="sousMenu">
    <li><a href="./Pages_libres/Les Consoles de salon.xhtml#origines">Les v&eacute;ritables origines du jeu vid&eacute;o</a></li>
    <li><a href="./Pages_libres/Les Consoles de salon.xhtml#succes">Du succ&egrave;s au crash du march&eacute; vid&eacute;oludique</a></li>
    <li><a href="./Pages_libres/Les Consoles de salon.xhtml#moderne">Les d&eacute;buts de l'&egrave;re moderne</a></li>
    <li><a href="./Pages_libres/Les Consoles de salon.xhtml#nouvelle_ere">Une nouvelle &egrave;re: les consoles 16 bits</a></li>
    <li><a href="./Pages_libres/Les Consoles de salon.xhtml#releve">La vraie rel&egrave;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&eacute;</a></li>
    <li><a href="#">Les premi&egrave;res machines: les 8 bits</a></li>
    <li><a href="#">La rel&egrave;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&eacute;s.xhtml">Les Dates cl&eacute;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 ?