[Résolu] Menu déroulant qui ne s'affiche pas - Et retour à la ligne du menu par Alexandreboudon - page 1

Bonjour,

Pour un projet, nous devons avec un ami refaire un site internet. Je lui ait confié la tâche de faire l'en-tête de la page avec des catégories ayant chacun un menu déroulant. Il m'a renvoyé le code aujourd'hui mais en l'essayant et en regardant j'ai remarqué plusieurs choses:

Le menu déroulant ne marche pas, il doit exister mais ne s'affiche pas (je me dis qu'étant dans le header et fixe, il passe sous le header)
La catégorie "Ethique" retourne à la ligne alors que chaque li à un width de 20%, ce qui normalement être afficher sur une seule ligne

J'ai enlevé de bases plusieurs lignes (après avoir testé si elles étaient utile) comme un z-index: 1000, ce qui est abusé comme chiffre pour un z-index (je me demande si le code ne vient pas d'internet du coup). J'ai essayé de le réarranger pour qu'ils soient lisible pour tout le monde.

Je me doute bien que dans certains cas, ces erreurs peuvent être résolu très simplement mais n'ayant pas la solution j'espère pouvoir recevoir une aide ici (plus dans l'explication que la réponse directement pour qu'au moins je puisse apprendre de mes erreurs).

Je m'excuse d'avance pour la taille du code, si vous voulez que j'enlève certaines parties pas de problèmes.

Voici le code HTML:

<!DOCTYPE html>
<html>
	<head>
		<title>sans titre</title>
		<meta charset="utf-8" />
		<link rel="stylesheet" href="Projet site.css" type="text/css" />
	</head>

	<body>
		<header>
			<h1>My website</h1>
			<nav>	
				<ul>
					<li class="Classe"><a href="#">Classe</a>
						<ul class="class">
							<li><a href="2nd.html">Seconde</a></li>
							<li><a href="1er.html">Premiére</a></li>
							<li><a href="Terminal.html">Terminale</a></li>
						</ul>
					</li>
					
					<li class="Doc"><a href="#">Documentation</a>
						<ul class="class">
							<li><a href="Bio.html">Biologie</a></li>
							<li><a href="Geo.html">Geologie</a></li>
							<li><a href="EduMedia.html">EduMedia</a></li>
							<li><a href="Office.html">Office National foret</a></li>
						</ul>
					</li>
					
					<li class="Travail"><a href="#">Travail Perso</a>
						<ul class="class">
							<li><a href="Révisions.html">Résvision</a></li>
							<li><a href="Méthodologie.html">Méthodologie</a></li>
							<li><a href="Tpe.html">Tpe</a></li>
						</ul>	
					</li>
					
					<li class="Actualites"><a href="#">Actualités</a> 
						<ul class="class">
							<li><a href="Prevision.html">Prévision</a></li>
							<li><a href="Site.html">Site scientifiques</a></li>
							<li><a href="Revue.html">Revue</a></li>
						</ul>
					</li>
						
					<li class="Ethique"><a href="#">Ethique</a>
						<ul class="class">
							<li><a href="Individu.html">Individu</a></li>
							<li><a href="Art.html">Art</a></li>
							<li><a href="Génétique.html">Génétique</a></li>
						</ul>
					</li>
				</ul>		
			</nav>
		</header>
	</body>

</html>

et le code CSS:

*{	box-sizing: border-box;}

@font-face	{	font-family:'Roboto-Medium';
							src:url(Roboto/Roboto-Medium.ttf) format('truetype');
						}

body	{	font-family: 'Roboto-Medium';
				margin:0;
				background-color:#86bd52;
			}

h1	{	margin-top:0px;
			text-align:center;
		}

header	{ 	background-color: #123456 ;
					width: 100%;
					color: white; 
				}

a	{	text-decoration: none;	}

nav > ul {	padding:0; }

nav > ul > li {	display: inline-block;
						width: 20%;	
						text-align: center;
					}

nav > ul > li > a 	{	color : white;	}


.class	{ display: none; }



nav li:hover .class {	display: inline-block;
									position: absolute;
									top: 100%;
									left: 0px;
									padding: 0px;
								}
.class li 	{	border-bottom: 1px solid #CCC;  }

.class > li> a	{	padding: 15px 30px;
						font-size: 13px;
						color: #222538;
						width: 270px;	
					}
.Classe:hover	{	border-radius: 5px ;
								background-color: RGB(228,77,38);
							}
 
.Doc:hover	{	border-radius: 5px ;
						background-color: RGB(000,112,192);
					}
 
.Travail:hover {	border-radius: 5px ;
							background-color: RGB(241,211,79);
						}
 
.Actualites:hover 	{	border-radius: 5px ;
									background-color: RGB(220,220,220);
								}

.Ethique:hover 	{	border-radius: 5px ;
								background-color: RGB(22,160,133);	
							}
 
.Classe .class {	background-color: RGB(230,100,40);	}
 
.Doc .class {	background-color: RGB(000,160,240);	}
 
.Travail .class	{ background-color: RGB(250,215,100);}

.Actualites.class 	{	background-color: RGB(220,220,220);}
 
.Ethique .class {	background-color: RGB(22,160,133);}


 
.Classe .class li:hover {	background-color: RGB(210,77,60);}
 
.Doc .class li:hover {	background-color: RGB(000,115,200);}
 
.Travail .class li:hover {	background-color: RGB(200,165,75);	}

.Actualites .class li:hover {	background-color: RGB(200,165,75);	}

.Ethique .class li:hover {	background-color: RGB(200,165,75);	}

.class li:hover a	{  	color: #EEE;
								font-weight: bold;
							}

Merci d'avance pour vos réponses.

Cordialement,

Alexandre

-
Edité par Alexandreboudon 16 décembre 2018 à 11:20:16

Kenkaio a écrit:

Salut

C'est du copié collé de ce site : ici

Par contre désolé mais j'arrives pas a lire le css

Salut,

Merci, je me disais bien que ça sentait le copié collé à plein nez.

Ps: pour l'alignement, j'ai réussi en mettant un float left mais du coup le header ne descend plus jusqu'au menu, je dois régler manuellement la taille du header du coup ?

Au passage pour afficher le menu, il utilise. un ul::after, n'ayant pas envie de rendre un projet dont je ne comprends pas les lignes, quel est le but de cette ligne qui m'affiche le menu alors qu'avant ce n'était pas possible ?

Il n'y avait pas le choix du codage en css, j'ai du mettre plain text c'est sûrement à cause de cela :/

Cordialement,

Alexandre

-
Edité par Alexandreboudon 16 décembre 2018 à 11:54:42

Menu déroulant qui ne s'affiche pas

Et retour à la ligne du menu

Menu déroulant qui ne s'affiche pas

Supprimer

Modérer

Signaler le message aux modérateurs