Bonjour, j'ai crée mon menu sans CSS maintenant que j'essaye de faire un CSS j'ai été sur un cite qui aide et j'ai us 2 code un pour le HTML et l'autre pour le CSS et je n'arrive pas a adapter mon HTML avec ce CSS. J'ai juste besoin de mettre mon HTML avec leurs CSS, Merci à vous car je ne comprend pas bien leurs code pour l'adapter au mien.

Mon code HTML:

<pre class="brush: xml;">

<header>

<nav>

<ul>

<li class="menu-membre"><a href="membre.php">Membre</a>

<ul class="sous-menu">

<li><a href="nouveau_membre.php">Nouveau membre</a></li>

<li><a href="membre_membre.php">Membre</a></li>

<li><a href="#">Match</a></li>

<li><a href="#">Supprimer membre</a></li>

</ul>

</li>

<li class="menu-entrainement"><a href="entrainement.php">Entrainement</a>

<ul class="sous-menu">

<li><a href="#">Terrain</a></li>

<li><a href="#">Date & Heure</a></li>

<li><a href="#">Entraineur</a></li>

</ul>

</li>

<li class="menu-entraineur"><a href="entraineur.php">Entraineur</a>

<ul class="sous-menu">

<li><a href="#">Entrainement</a></li>

<li><a href="#">Match</a></li>

</ul>

</li>

<li class="menu-match"><a href="match.php">Match</a>

<ul class="sous-menu">

<li><a href="#">Reserve</a></li>

<li><a href="#">Match</a></li>

<li><a href="#">Score</a></li>

</ul>

</li>

</ul>

</nav>

</header>

Voici le leurs:

<nav><div class='wifeo_conteneur_menu'><div class='wifeo_pagemenu'><a href='http://membre.com' target='_blank'>Membre</a><span>Membre</span></div><div class='wifeo_pagemenu'><a href='http://entrainement.com' target='_blank'>Entrainement</a><span>Entrainement</span></div><div class='wifeo_pagemenu'><a href='http://entraineurs.com' target='_blank'>Entraineurs</a><span>Entraineurs</span></div><div class='wifeo_pagemenu'><a href='http://match.com' target='_blank'>Match</a><span>Match</span></div></div></nav>

Et leurs CSS:

<style type="text/css">.wifeo_pagemenu > a{color:#FFFFFF;text-decoration:none} .wifeo_rubrique > a{color:#FCCF3C;text-decoration:none} .wifeo_rubrique:hover > a{color:#FCCF3C;font-weight:bold;text-decoration:none} .wifeo_pagesousmenu > a{color:#FFFFFF;text-decoration:none} .wifeo_conteneur_menu{border-spacing:0px} .wifeo_conteneur_menu{width:100%;display:table;height:30px} .wifeo_conteneur_menu a{text-decoration:none;display:table-cell;vertical-align:middle;height:30px} .wifeo_pagemenu, .wifeo_rubrique{float:left;width:25%;display:table;vertical-align:middle;position:relative} @media screen and (min-device-width:1024px){.wifeo_pagemenu span, .wifeo_rubrique span{color:#FFFFFF;position:relative;display:inline-block;padding:5px 0 5px;background-color:#FC6204;width:100%;height:30px;text-align:center;font-size:22px;border-bottom:3px solid #A20800;-webkit-transition:-webkit-transform 0.5s;-moz-transition:-moz-transform 0.5s;-ms-transition:-ms-transform 0.5s;-o-transition:-o-transform 0.5s;transition:transform 0.5s;-webkit-transform-origin:50% 0;-moz-transform-origin:50% 0;-ms-transform-origin:50% 0;-o-transform-origin:50% 0;transform-origin:50% 0;transform-style:preserve-3d}} .wifeo_pagemenu a, .wifeo_rubrique > a{color:#FCCF3C;position:absolute;display:inline-block;padding-top:5px;padding-bottom:5px;background-color:#FC6204;width:100%;height:30px;text-align:center;font-size:22px} @media screen and (min-device-width:1024px){.wifeo_pagemenu a, .wifeo_rubrique > a{color:#FCCF3C;position:absolute;display:inline-block;padding-top:5px;padding-bottom:5px;background-color:#0F529E;width:100%;height:30px;text-align:center;font-size:22px}} .wifeo_pagemenu:hover span, .wifeo_rubrique:hover span{width:100%;height:30px;box-shadow:10px 35px 70px 0px #333333} @media screen and (min-device-width:1024px){.wifeo_pagemenu:hover span, .wifeo_rubrique:hover span{color:#FC6204;-webkit-transform:rotateX(85deg) translateY(-22px);-moz-transform:rotateX(85deg) translateY(-22px);-ms-transform:rotateX(85deg) translateY(-22px);-o-transform:rotateX(85deg) translateY(-22px);transform:rotateX(85deg) translateY(-22px);-webkit-transition:all 0.25s ease;-moz-transition:all 0.25s ease;-ms-transition:all 0.25s ease;-o-transition:all 0.25s ease;transition:all 0.25s ease}} .wifeo_sousmenu{width:100%;left:0;opacity:0;position:absolute;top:0px;visibility:hidden;z-index:5;border-bottom:3px solid #000044} @media screen and (min-device-width:1024px){.wifeo_sousmenu{-webkit-transition:all 0.25s ease;-moz-transition:all 0.25s ease;-ms-transition:all 0.25s ease;-o-transition:all 0.25s ease;transition:all 0.25s ease}} .wifeo_pagesousmenu{width:100%;text-align:center;display:table} .wifeo_sousmenu a{padding-left:5px;padding-right:5px;text-shadow:none;background-position:center;text-align:center;background-color:#0F529E;font-size:22px} .wifeo_rubrique:hover > .wifeo_sousmenu{opacity:1;top:40px;visibility:visible}</style>

</pre>

-
Edité par maox2001 6 avril 2021 à 12:37:30

Bonjour,

Merci de colorer votre code à l'aide du bouton Code

Les forums d'Openclassrooms disposent d'une fonctionnalité permettant de colorer et mettre en forme les codes source afin de les rendre plus lisibles et faciles à manipuler par les intervenants. Pour cela, il faut utiliser le bouton de l'éditeur, choisir un des langages proposés et coller votre code dans la zone prévue. Si vous utilisez l'éditeur de messages en mode Markdown, il faut utiliser les balises <pre class="brush: xml;">Votre code ici</pre>.

Mauvais titre

Le titre est un élément important qui ne doit pas être négligé. N'oubliez pas cette règle simple : le titre idéal résume la question que vous allez poser en une petite phrase. Il doit permettre aux visiteurs de se repérer facilement dans le forum visité et d'identifier le sujet à sa seule lecture.

Vous pouvez utiliser divers préfixes comme [Erreur], [MySQL], [Compatibilité], etc... Aussi, pensez à consulter les règles propres à chaque forum (visibles dans les topics épinglés en haut des sections).

De plus, choisir un bon titre permet de rendre plus faciles les recherches des autres membres.

Les titres de type "besoin d'aide" ou "problème" ne sont pas tolérés.

Pour modifier votre titre, éditez le premier message de votre sujet.

(titre originel : Menu déroulant HTML/CSS)