Aller au contenu

Faire un menu horizontal déroulant dans un document xhtml


babababa_13

Messages recommandés

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 !

Lien vers le commentaire
Partager sur d’autres sites

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 ^^

Lien vers le commentaire
Partager sur d’autres sites

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>

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
  • Statistiques des membres

    23 028
    Total des membres
    1 033
    Maximum en ligne
    Subaru
    Membre le plus récent
    Subaru
    Inscription
  • Statistiques des forums

    128,1 k
    Total des sujets
    1,7 M
    Total des messages
×
×
  • Créer...