Bonjour j'aimerai crée un menu horizontal.

Actuellement mon menu est vertical il à 3 niveaux et il comporte des sous-menus de 1 niveau

j'ai utiliser un tuto pour le construire car je n'y arrivais pas mais impossible pour moi de le mettre horizontalement malgré plusieurs tentative.

quelqu'un peut-il m'aider?

Voici le code html de mon menu:

Code CSS

Bonjour,

Merci d'utiliser la mise en forme de 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 celà, 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: c;">Votre code ici</pre>.

Manque de recherche

La question que vous posez est très fréquente, cela démontre un manque de recherche évident. Internet et ce forum fourmillent de ressources répondant à votre besoin.

Je vous invite à effectuer de vraies recherches qui sont à la base d'un bon apprentissage…

si je pose la question c'est que j'ai chercher et pas trouver effectivement il ya des sujet similaire au menu déroulant mais mon problème est différent j'ai le droit de demander de l'aide

-
Edité par bryankanniah 22 mai 2018 à 16:51:23

Je me prends pour quelqu'un qui te demande de mettre ton code d'une manière qui est lisible et reproductible.

Et si j'ai ajouté "manque de recherche", c'est parce que ce type de demande est effectivement *très* courante, et qu'on trouve des réponses partout. N'ayant pas pu répliquer ton code vu que c'est une image, j'ai tiré une conclusion quelque peu hâtive, je le concède.

il est lisible mon code c'est juste les couleurs on trouve bien pire que sa par d'autres personne si vous ne voulez pas m'aidez discutez pas avec moi s'il vous plait sa m'interresse pas je veux que quelqu'un ait la gentilesse de m'aider c'est tout

Pour t'aider, la meilleure manière est de copier ton code dans une page, afin de l'interpréter et de pouvoir comprendre où ça coince. Personne n'ira prendre le temps de recopier lettre par lettre ton image. Aide-nous à t'aider.

code html

<div id="menu"> 
					<ul class="niveau1"> 
						<li class="sousmenu"><a href="menu 1">menu 1</a>
							<ul class="niveau2"> 
								<li><a href="Sous menu 1"></a></li> 
							</ul> 
						</li>

						<li class="sousmenu"><a href="menu 2">menu 2</a> 
							<ul class="niveau2"> 
								<li><a href="Sous menu 1"></a></li> 
							</ul> 
						</li> 
						
						<li class="sousmenu"><a href="menu 3">menu 3</a>
							<ul class="niveau2"> 
								<li><a href="Sous menu 1"></a></li> 
							</ul> 
						</li> 
						
						<li class="sousmenu"><a href="menu 4">menu 4</a> 
							<ul class="niveau2"> 
								<li><a href="Sous menu 3"></a> 
								</li> 
							</ul> 
						</li> 
						
					</ul> 
				</div>

CODE CSS

#menu{
	width: 100%;
}

#menu ul { 
    padding: 0; 
    width: 100px; 
    border:1px solid; 
    margin:0px; 
} 

/*On positionne les elements du menu */ 
#menu ul li { 
    position:relative; 
    list-style: none; /*on enleve les icones de liste */ 
    border-bottom:1px solid; /*ajout d'une bordure de separation d'element:*/ 
} 

#menu ul ul { 
    position: absolute; 
    top: 0; 
    left: 100px; /*100px correspond au d calage a droite, on d cale de la taille du ul de base*/
}   

div#menu li a { 
    text-decoration: none; /* plus de soulignement pour les liens */ 
}



/* fichier pour internet explorer */ 
body { 
      behavior: url(csshover.htc); 
     } 

/* On cache tous les sous menu avec la propri t display none */ 
div#menu ul ul { 
    position: absolute; 
    top: 0; 
    left: 100px; 
    display:none
} 

/*Lors du survol ,avec la souris, les sousmenu apparaissent grace a display: block */ 
#menu ul.niveau1 li.sousmenu:hover ul.niveau2{ 
    display:block; 
}

Avec le code fourni j'obtiens cela : https://codepen.io/anon/pen/NMmvWM N'est-ce pas le comportement attendu ? De plus tu parles de trois niveaux mais je n'en vois que deux…

Je te suggère de jeter un œil à http://www.frogweb.fr/ qui donne de bons tutos pour des menus déroulants - probablement plus adapté que celui que tu avais trouvé qui te fait charger un fichier JS (le behavior.htc) pour Internet Explorer 6.

Yo, tu vas surement bouder pck ca va te vexer mais j'ai ecris "menu horizontal avec sous menu html" et premier resultat j'ai trouvé un code qui fait exactement ce que tu veux..

et respecte un peu le boulot des gens, je sais pas si t'a vu qu'il y avait ecrit Staff a coté du pseudo de la madame, c'est a dire que c'est le genre de personne qui font en sorte que le forum continue de bien fonctionner. et je la respecte parce que tu m'aurai parler comme ca a moi tu aurai jamais vu ma reponse x) Mais au moins maintenant tu sais comment faire un bon post :*

<div id="menu"><ul id="menu-deroulant">
	<li><a href="#">Lien menu 1</a>
		<ul>
			<li><a href="#">lien sous menu 1</a></li>
			<li><a href="#">lien sous menu 1</a></li>
			<li><a href="#">lien sous menu 1</a></li>
			<li><a href="#">lien sous menu 1</a></li>
		</ul>
	</li><!--
 --><li><a href="#">Lien menu 2</a>
		<ul>
			<li><a href="#">Lien sous menu 2</a></li>
			<li><a href="#">Lien sous menu 2</a></li>
			<li><a href="#">Lien sous menu 2</a></li>
			<li><a href="#">Lien sous menu 2</a></li>
		</ul>
	</li>
  <li><a href="#">Lien menu 3</a>
		<ul>
			<li><a href="#">lien sous menu 1</a></li>
			<li><a href="#">lien sous menu 1</a></li>
			<li><a href="#">lien sous menu 1</a></li>
			<li><a href="#">lien sous menu 1</a></li>
		</ul>
	</li>
</ul>
</div>

#menu-deroulant, #menu-deroulant ul {
    padding: 0;
    margin: 0;
    list-style: none;
}
#menu-deroulant {
/* on centre le menu dans la page */
    text-align: center;
}
#menu-deroulant li {
/* on place les liens du menu horizontalement */
    display: inline-block;
  margin-left:2%;
}
#menu-deroulant ul li {
/* on enlève ce comportement pour les liens du sous menu */
    display: inherit;
}
#menu-deroulant a {
    text-decoration: none;
    display: block;
	color:#000;
}
#menu-deroulant ul {
    position: absolute;
/* on cache les sous menus complètement sur la gauche */
    left: -999em;
    text-align: left;
    z-index: 1000;
}
#menu-deroulant li:hover ul {
/* Au survol des li du menu on replace les sous menus */
    left: auto;
}

deja un je ne vais pas bouder pas  je la respecte ton intervention n'etait pas neccessaire c'est moi qui est pas été respecté et dans une histoire il faut savoir etre impartial et non prendre de parti. bonne journée merci pour ton aide

-
Edité par bryankanniah 23 mai 2018 à 10:41:59

> c'est moi qui est pas été respecté

Libre à toi de le penser. Et je suis navrée si je t'ai blessé. Mais comme dit plus haut, il y a des règles ici, visibles dans les CGU, la charte de bonne conduite, et le sujet épinglé dans le forum HTML. Et c'est mon travail que de faire suivre ces règles si elles ne le sont pas. C'est tout. Rien de personnel.

-
Edité par Lamecarlate 23 mai 2018 à 10:51:35