28172 sujets

CSS et mise en forme, CSS3

Menu déroulant ne s'affiche pas complètement

Bonjour, je ne sais pas du tout comment faire , j'ai mon menu déroulant qui ne s'affiche pas en entier, je me suis dit que c'est à cause de mon clip path mais même sans lui, il ne s’affiche pas entièrement , j'ai mis des z index mais rien n'y fait , vous pouvez m'aider ?


	<div id="h_main">
		<nav id="h_container">
			<ul>
				<li>Menu
					<ul>
						<li><a href="#"> Home </a></li>
						<li><a href="#"> Inscription </a></li>
						<li><a href="#"> Connexion </a></li>
						<li><a href="#"> Profil </a></li>
						<li><a href="#"> Admin </a></li>
					</ul>
				</li>
			</ul>
		</nav>
	</div>




nav{
	color: #FFFFFF;
}

nav ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

nav ul li{
	margin: 0;
	padding: 0;
	float: left;
	width: 200px;
	height: 40px;
	background-color:rgba(0, 0, 0, 0.8);
	line-height: 40px;
	text-align: center; 
}

header nav ul li a{
	display: block;
	text-decoration: none;
	color: gray;
}

header nav ul li a:hover{
	background-color: white;
	opacity: 0.5;
}

header nav ul li ul li{
	display: none;
}

header nav ul li:hover ul li{
	display: block;
}


upload/1608040009-81315-unknown.png
Hello,

Avec ton code proposé ça fonctionne bien Smiley cligne
( enfin en remplaçant header par #h_main dans le css )
stryk a écrit :
Hello,

Avec ton code proposé ça fonctionne bien Smiley cligne
( enfin en remplaçant header par #h_main dans le css )


moi non , même en mettant #h_main il maque des sous onglet
stryk a écrit :
https://codepen.io/exemple/pen/ZEpeoLM

Smiley smile
a ok,

moi j'ai quelque choses qui passe devant, je sais pas quoi ou comment y remédier ,

Si tu veut tester, et voir voici tout mon code html et css 


<!DOCTYPE HTML>
<html lang="fr">
<head>
	<script src="https://use.fontawesome.com/d3028f0b61.js"></script>
	<link rel="stylesheet" type="text/css" href="../../CSS/index.css">
	<link rel="shortcut icon" href="https://i2.cdscdn.com/pdt2/6/8/0/1/700x700/sch4005086700680/rw/samourai.jpg"/>
	<link rel="preconnect" href="https://fonts.gstatic.com">
	<link href="https://fonts.googleapis.com/css2?family=Fredericka+the+Great&display=swap" rel="stylesheet">
	<link rel="preconnect">	
	<meta name="description" content="Venez découvrir l'univers des samourai!"/>
	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
	<meta charset="utf-8">
</head>
<body>
<header id="header_index">
	<div id="divtitle">
		<div id="title">
			<h1>Samouraï</h1>
		</div>
	</div>
	<div id="h_main">
		<nav id="h_container">
			<ul>
				<li>Menu
					<ul>
						<li><a href="#"> Home </a></li>
						<li><a href="#"> Inscription </a></li>
						<li><a href="#"> Connexion </a></li>
						<li><a href="#"> Profil </a></li>
						<li><a href="#"> Admin </a></li>
					</ul>
				</li>
			</ul>
		</nav>
	</div>
</header>
<main id="main_index">
	<p>Menu</p>
</main>
<footer id="footer_index">
	<p>f</p>
</footer>
</body>
</html>






body{
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 125vh;
	font-family: 'Fredericka the Great', cursive;
}


#header_index{
	background-color: blue;
	height: 35vh;
	clip-path: polygon(0 0, 0% 100%, 100% 0);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

#divtitle{
	width: 100%;
	height: 20%;
	background-color: green;
	display: flex;
	justify-content: center;
}

#title{
	background-color: orange;
	height: 100%;
	width: 30%;
	text-align: center;
	font-size: 2vh;
}

#h_main{
	width: 100%;
	height: 20%;
	background-color: green;
	display: flex;
	margin-bottom: 5%;
}

#h_container{
	background-color: red;
	height: 100%;
}

nav{
	color: #FFFFFF;
}

nav ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

nav ul li{
	margin: 0;
	padding: 0;
	float: left;
	width: 200px;
	height: 40px;
	background-color:rgba(0, 0, 0, 0.8);
	line-height: 40px;
	text-align: center; 
}

header nav ul li a{
	display: block;
	text-decoration: none;
	color: gray;
}

header nav ul li a:hover{
	background-color: white;
	opacity: 0.5;
}

header nav ul li ul li{
	display: none;
}

header nav ul li:hover ul li{
	display: block;
}


#main_index{
	background-color: red;
	display: flex;
	flex-grow: 1;
}

#footer_index{
	background-color: green;
	height: 35vh;
}

Modifié par freeeeezi (15 Dec 2020 - 16:13)
Tu applique un clip-path à ton header en entier, or ton menu est contenu dans ton header.
Il faut donc le sortir, comme ceci ( j'ai juste corrigé le menu ):

https://codepen.io/exemple/pen/RwGpJVx

EDIT: je suis curieux de voir ce que ça va donner, le titre 'samouraï' me plait bien ( je pratique le kenjutsu ) Smiley smile
Modifié par stryk (15 Dec 2020 - 16:37)
Meilleure solution
stryk a écrit :
Tu applique un clip-path à ton header en entier, or ton menu est contenu dans ton header.
Il faut donc le sortir, comme ceci ( j'ai juste corrigé le menu ):

https://codepen.io/exemple/pen/RwGpJVx

EDIT: je suis curieux de voir ce que ça va donner, le titre 'samouraï' me plait bien ( je pratique le kenjutsu ) Smiley smile



D'accord merci beaucoup Smiley smile c'est juste une faut site pour m'entrainer au PHP Smiley smile
Sujet clos
Aller à