Partage

Menu déroulant

3 janvier 2018 à 22:51:22

Bonjour ou bonsoir ^^

Je suis en train de faire un site pour un de mes cours, et j'ai des problèmes avec mon menu déroulant (pourtant j'ai lu plusieurs tutos, je n'arrive pas à comprendre et savoir comment on fait)

Je voudrais avoir un menu, qui indique les parties et qui affiche de manière verticale les autres liens

Mon html : 

  <div class="ancres">
        <ul class="menu_verti">
            <li><a href="#">métiers du Design</a></li>
                <ul><li><a href="#Directeur Créatif">Directeur Créatif</a></li>
                    <li><a href="#Game Designer">Game Designer</a></li>
                    <li><a href="#Level Designer">Level Designer</a></li>
                </ul>
            <li><a href="#">métiers du Graphisme</a></li>
                <ul>
                    <li><a href="#Directeur Artistique">Directeur Artistique</a></li>
                    <li><a href="#Graphiste">Graphiste 2D/3D</a></li>
                    <li><a href="#Animateur">Animateur</a></li>
                </ul>
            <li><a href="#">métiers de la Technologie</a></li>
                <ul>
                    <li><a href="#Directeur Technique">Directeur Technique</a></li>
                    <li><a href="#Programmmeur moteur">Programmeur Moteur</a></li>
                    <li><a href="#Programmeur gameplay">Programmeur Gameplay</a></li>
                </ul>
            <li><a href="#Testeur">Testeur</a></li>
        </ul>
    </div> 

et j'ai déjà réussi a comprendre le début du CSS qui a donné ca :

.ancres{
	color: blue;
	float: left;
	border-style: solid white;
	box-shadow: 4px 6px 10px white;
	width: 175px;
	position: fixed;
	padding-bottom: 20px;}

.menu_verti, .menu_verti ul {
	padding:0;
	margin:0;
	list-style:none;
	width: 180px; /* seule ligne rajoutée */
}
.menu_verti li {
	background:none;

}
.menu_verti a {
	display:block;
	text-decoration: none;
	color: blue;
	padding-top: 10px;
	padding-left: 3px;
}

.menu_verti ul {
	position: absolute;
	left:-999em;
}
.menu_verti li:hover ul {
	top: 0;
	left: 180px;
}

Mais je n'ai absolument pas compris comment insérer les liens href="#" et les faire apparaître.

Pourriez vous m'aider ?  (je ne suis vraiment pas douée en html/css xD)

3 janvier 2018 à 23:22:37

Peut être que ce passage t'aidera

https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/creer-des-liens#/id/r-1604608

Compos sui.
3 janvier 2018 à 23:27:09

exen a écrit:

Peut être que ce passage t'aidera

https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/creer-des-liens#/id/r-1604608


enfaite, j'ai compris comment faire les liens.

Mais le problème est comment en faire un menu déroulant, pour faire afficher les liens menant aux "metiers du design", "graphisme" et techniques

3 janvier 2018 à 23:43:09

Ça viens de la balise </li> de ton titre elle doit se trouver en dessous de ton sous menu pour l'englober

un peut comme ça

<li><a href="#">métiers du Design</a>
   <ul>
     <li><a href="#Directeur Créatif">Directeur Créatif</a></li>
     <li><a href="#Game Designer">Game Designer</a></li>
     <li><a href="#Level Designer">Level Designer</a></li>   
   </ul>
</li>




Ici tu en vois un peut plus

https://openclassrooms.com/courses/creer-un-menu-horizontal-deroulant-en-css

-
Edité par exen 3 janvier 2018 à 23:57:59

Compos sui.

Menu déroulant

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
  • Editeur
  • Markdown