Probleme menu déroulant

Bonsoir pour un projet j'ai du effectuer le media queries et j'ai alors décider de mettre un menu horizontal pour les écran inférieur à 800 px.

Mais mon menu ne marche pas, les sections du menu ne s'affichent pas, quand je passe la souris dessus les sections bougent très vite.

voici mon css global

*fichier css*/

/*fichier css*/



#page {

float:left;}



header {
	background-image: url("../images/couleur-degrade-blanc.jpg");
	text-align: center;
	padding-bottom: 7.35%;
	margin-bottom: 7%;
	margin-top: 5%;
}

body {
	background-image: url("../images/fond_portfolio.jpg");
	margin-top: 2.5%;
	margin-left: 10%;
	margin-right: 10%;
}

p,
h1,
	{
	color: black;
	text-align: center;
}

h2 {
	text-align: center;
	color: black;
}

h3 {
	text-align: center;
	color: black;
}

a {
	text-transform: #04356C;
}

section {
	color: #04356C;
	text-align: left;
}

article {
	margin: 1%;
	padding-left: 10%;
	border-style: solid;
	border-width: 1 px;
	border-radius: 15px;
	padding-right: 100px;
	background-color: white;
	float: left;
	margin-left: 22%;
	margin-right: 22%;
	text-align: center;
	color: black;
	max-width: 36%;
	overflow: auto;
}


video {
	max-width: 70%;
	height: auto;
}

#nom {
	padding-top: 5%;
}

#logo {
	background-image: url("../images/folio_logo_big.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	width: 50%;
	height: 11.75em;
	float: left;
}

/* MENU DEROULANT */

nav {
	padding: 0;
	margin: 0;
	list-style: none;
	text-align: center;
	width: 17%;
	margin-bottom: 5%;
	Position: fixed;

}

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

nav li {
	background-color: black;
	border-radius: 6px;
	margin-bottom: 2px;
	box-shadow: 3px 3px 3px #999;
	border: solid 1px #333A40
}

nav ul li li {
	max-height: 0;
	overflow: hidden;
	transition: all .5s;
	border-radius: 0;
	background: #444;
	box-shadow: none;
	border: none;
	margin: 0
}

nav a {
	display: block;
	text-decoration: none;
	color: #fff;
	padding: 8px 0;
	font-family: verdana;
	font-size: 1.2em
}

/* FIN DEROULANT */

nav ul li a,
nav li:hover li a {
	font-size: 1em
}

nav li:hover {
	background: #C0C0C0;
}

nav li li:hover {
	background: #C0C0C0;
}

nav li:hover li {
	max-height: 15em;
}

table {
	border-collapse: collapse;
	margin-bottom: 5%;
	margin-top: 5%;
}

td {
	border: 1px solid black;
}

/* FIN NAVIGATION */

/* formulaire début */


form {
 background-color:#FAFAFA;
 padding:10px;
 width:280px;
 
 }
fieldset {

 margin-bottom:10px;
 border:1px solid #DF3F3F;
 }
legend {
 color:#DF3F3F;

 }
label {
 margin-top:10px;
 display:block;
 }
label.inline {
 display:inline;
 margin-right:45px;
 }
input, textarea, select, option {
 background-color:#FFF3F3;
 }
input, textarea, select {
 padding:3px;
 border:1px solid #F5C5C5;
 border-radius:5px;
 width:200px;
 box-shadow:1px 1px 2px #C0C0C0 inset;
 }
select {
 margin-top:10px;
 }
input[type=radio] {
 background-color:transparent;
 border:none;
 width:10px;
 }
input[type=submit], input[type=reset] {
 width:100px;
 margin-left:5px;
 box-shadow:1px 1px 1px #D83F3D;
 cursor:pointer;
 } 
 
 /* fin formulaire */

Voici le deuxieme css pour le media queries

@media screen and (max-width: 800px){




header {

	text-align: center;
	padding-bottom: 7.35%;
	margin-bottom: 7%;
	margin-top: 5%;
	
	
}

#nom {
	padding-top: 5%;

	
}

#logo {
	
	width: 0%;
	background:none;
	
}

/* MENU DEROULANT */

 nav ul ul li {
display: block;
}

nav {
	margin-left: 10%;
		margin-bottom:  5%;
		padding: 2% 0% 7% 0%;
		width: 80%;
	position:absolute;
		
		

}

nav ul {
	list-style: none ;
		text-align : center ;
		
		
}

nav li {
	background-color: black;
	border-radius: 6px;
	margin-bottom: 2px;
	box-shadow: 3px 3px 3px #999;
	border: solid 1px #333A40
	float:left;
	
}

nav ul li {
	float:left;
		margin-left:  2%;
		padding: 1%;
		width : 20%;
		
		
		
		
		}

nav ul li li {
	max-height: 0;
	overflow: hidden;
	transition: all .5s;
	border-radius: 0;
	background: #444;
	box-shadow: none;
	border: none;
	margin: 0;
	display :none;
	
	
}

nav a {
	display: inline;
	text-decoration: none;
	color: #fff;
	padding: 8px 0;
	font-family: verdana;
	font-size: 1.2em;
	float:left;
	
	
}

 FIN DEROULANT 

nav ul li a,
nav li:hover li a {
	font-size: 1em
	display :none;
}

nav li:hover {
	background: #C0C0C0;
	float: none;
	
}

nav li li:hover {
	background: #C0C0C0;

}

nav li:hover li {
	max-height: 15em;
	
}

table {
	border-collapse: collapse;
	margin-bottom: 5%;
	margin-top: 5%;
}

td {
	border: 1px solid black;
}


/* FIN NAVIGATION */

et voici mon code html

<!DOCTYPE html>
<html>
<head>
	<title>ePortfolio</title>
	<meta content="text/html; charset=utf-8" http-equiv="Content-Type"><!-- mobile specific info ... mobile specify windows size to 800/900 whereas device-width is less in general, resulting in small texte etc.- those meta correct this... -->
	<meta content="true" name="HandheldFriendly">
	<meta content="width=device-width, height=device-height, user-scalable=no" name="viewport"><!-- end mobile specific info -->
	<link href="styleCSS/style.css" rel="stylesheet" type="text/css">
	<link href="styleCSS/style2.css" rel="stylesheet" type="text/css">
	
</head>
<body>
	<div id="globale">
		<header>
			<!-- balise html5 equivalant à <div id="header"> -->
			<div id="logo"></div>
			<div id="nom">
				<h1>Younas FERIANI</h1>
				<p>Etudiant Informatique</p>
			</div>
		</header>
		<div style="clear:both"></div>
		<nav id="menu">
			<ul>
				<li>
					<a href="accueil.html">Accueil</a>
				</li>
				<li>
					<a href="competences.html">Compétences</a>
					<ul>
						<li>
							<a href="c.html">Programmation en C</a>
						</li>
					</ul>
				</li>
				<li>
					<a href="experiences.html">Expériences</a>
					<ul>
						<li>
							<a href="stages.html">Stages</a>
						</li>
					</ul>
				</li>
				<li>
					<a href="loisirs.html">Loisirs</a>
					<ul>
						<li>
							<a href="musique.html">Musique</a>
						</li>
						<li>
							<a href="football.html">Football</a>
						</li>
					</ul>
				</li>
				<li>
					<a href="index.html">Index</a>
					<ul>
						<li>
							<a href="formulaire.html">Formulaire</a>
						</li>
					</ul>
				</li>
			</ul><!-- </li></ul> -->
		</nav>
		<div id="page">
			<h2>Mon parcours scolaire</h2>
			<article>

   
				<h1>Collège</h1>
				<p>J'ai passé 4 ans au Collège Sainte-Clotilde où j'ai obtenu mon brevet mention Bien</p><img src="./images/logos.bmp">
			</article>
			<article>
				<h1>Lycée</h1>
				<p>Après avoir obtenu mon brevet je suis allé au Lycée Charles-Péguy où j'ai obtenu un baccalauréat ES mention Assez-Bien</p><img src="./images/peguy.png">
			</article>
			<article>
				<h1>Etude post-bac</h1>
				<p>Je suis aujourdhui à l'IUT Paris Descartes dans le but d'obtenir un DUT informatique</p><img src="./images/descartes.jpg">
			</article>
		</div><!-- fin id="page"-->
	</div><!-- fin id="globale"-->
</body>
</html>

Menu normal qui marche Menu horizontal qui ne marche pas

-
Edité par YounasFeriani 13 décembre 2017 à 1:05:38

YounasFeriani

13 décembre 2017 à 1:02:47

Mewen_bzh

13 décembre 2017 à 9:08:08

Bonjour,

Je te conseille de revoir ton code :

- les media queries ne se font pas dans un fichier à part mais à la fin de ta feuille de styles,

- ligne 59 de ton fichier pour le responsive : une propriété CSS ne se termine pas par un ";",

- idem à la ligne 104 de ce même fichier,

- tu ne fermes pas ta media query non plus d'ailleurs.

Je pense donc qu'une bonne piste pour commencer serait de corriger toutes ces erreurs inattention pour éviter que le navigateur ne s'emmêle les pinceaux à essayer de comprendre ton code...

Je ne réponds pas aux messages privés.

Media Queries

Probleme menu déroulant

Supprimer

Modérer

Signaler le message aux modérateurs