[Résolu] Menu déroulant caché et décalé

Bonjour,

J'ai ce problème avec le menu déroulant de mon site-web :


Il est non seulement décalé vers la droite et surtout il est caché par la vidéo que j'ai mise en page d'accueil.

Voici la partie du code HTML contenant le menu et la vidéo :

<nav>
		<ul>
			<li><a href="index.html">Accueil</a>
			<li><a href="html/Articles.html">Nos Articles</a>
				<ul>
					<li><a href="">Boxe</a>
					<li><a href="">Muay Thai</a>
					<li><a href="">MMA</a>
					<li><a href="">Grappling / JJB</a>
					<li><a href="">Arts Martiaux</a>
				</ul>
			<li><a href="html/Tutoriels.html">Tutos</a>
			<li><a href="html/Images.html">Images</a>
			<li><a href="html/Contact.html">Contact</a>
			<li><a href="html/MesFavoris.html">Nos partenaires</a>
		</ul>
	</nav>
	<main>
		<video src="videos/presentation.mp4" width="1200" height="500" autoplay loop controls/>
	</main>

La partie du CSS agissant sur le HTML :

/*menu*/
 
nav{
	color:#FFFFFF;
}
 
nav ul{
	list-style-type:none;
}
 
nav ul li{
	float:left;
	width:200px;
	height:40px;
	background-color:rgba(0,0,0,0.8);
	text-align:center;
	padding-vertical:10px;
}
 
nav ul li ul li{
	display:none;
}
 
nav ul li:hover ul li{
	display:block;
}
 
nav a {
	padding:10px;
	background-color:black;
	display: block;
	text-decoration: none;
	color: white;
}
 
nav a:hover {
	background-color:red;
	border-bottom:2px solid gold;
}
 
 
/*corps*/
 
main {
	margin-top:105px;
	margin-left: 60px;
}

J'ai essayé d'utiliser les z-index en mettant par exemple le main contenant la vidéo à z-index:1 et le menu déroulant à z-index:2 mais rien n'y fait.

Merci pour votre aide.

Bonjour,

"z-index" était la bonne idée, mais il faut aussi ajouter "position:relative;" à "main" et "nav" :

nav, main {position:relative;}
nav {z-index:2;}
main {z-index:1;}

Sur l'exemple que tu as donné, c'est suffisant pour que ça tombe en marche.

Amicalement,

Parfait, je viens de trouver tout seul et c'est exactement ce que tu proposes !

Merci !

Par contre pour le décalage vers la droite toujours le même problème, des idées ?
Modifié par sj4555 (30 Aug 2020 - 23:49)

Merci !

ça marche parfaitement !

Par contre pourquoi le padding influe sur la position de la liste? Le padding n'est t'il pas sensé influer sur la position des éléments au sein de celle-ci et ce n'est pas justement le margin qui influe sur la position du block en lui-même?

Visiblement ça marche donc quelque chose m'échappe, pourrais-tu éclairer ma lanterne ?
Modifié par sj4555 (31 Aug 2020 - 09:47)

Bonjour, comme tu styles les éléments au sein de la liste, ceux-ci sont effectivement décalés sur la droite à cause du padding-left du <ul>

voici une représentation des marges et padding «par défaut» d'un <ul>:

Merci pour l'explication, c'est plus clair maintenant

sj4555 a écrit :
Par contre pourquoi le padding influe sur la position de la liste? Le padding n'est t'il pas sensé influer sur la position des éléments au sein de celle-ci et ce n'est pas justement le margin qui influe sur la position du block en lui-même?

Ton <ul> étant transparent (en fait il a même une hauteur nulle), on avait l'impression que toute la liste(le <ul> donc) était décalée, mais en fait c'était seulement les <li> qu'il contenait qui étaient décalés (puisque le <ul> avait un padding par défaut).

Note aussi que ton <ul> a une hauteur nulle car les éléments qu'il contient sont en float. Ceci est dû à une autre erreur probable concernant l'instruction où il y a ce float.

Tu as mis :

nav ul li
{
	float:left;
	...
}

Or il faudrait n'appliquer ce code qu'aux <ul> principaux et mettre me semble-t-il (il faut ajouter des ">" pour indiquer qu'on ne doit s'occuper que des éléments directement enfants de <nav>) :

nav>ul>li
{
	float:left;
	...
}

Car si tu ne fais pas ça, ton "nav ul li{float:left;...}" s'applique non seulement à tes <ul> principaux (ce qui est voulu), mais aussi <ul> qu'ils contiennent (et là, je ne pense pas que c'était voulu).

Bref, ça marchait un peu par hasard !

Amicalement,