Non affichage du menu deroulant et du background image en CSS

**AlgahoDest** · 05/06/2020, 17h37

Bonjour,

Après des semaines de recherches, je me tourne vers vous car, je n'arrive pas à voir le problème au niveau de mon code.

Le premier c'est que j'ai essayé de faire un menu déroulant en css mais cela n'a pas fonctionné (alors que celui-ci a très bien marché dans un code a part) ?

Le deuxième c'est que le background-image de la "partie2" de présentation ne veut pas s'afficher alors qu'il n'y aucun problème par rapport au chemin ou autre?

Je vous joins ci dessus mes codes :

EN CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
/* Mot sur image*/
.motSurImage {
    position: relative;
}
 
.motSurImage p {
	list-style-type:none;
    background: none;
    position: absolute;
    text-align: left;
    font-family: Georgia;
    margin: 0;
	font-size: 30px;
	top: 30%;
    margin-left: 30px;
    color: white;
 }
 
.motSurImage p a{
	 list-style:none;
	text-decoration:none;
	color: white;
	width: 100%
}
 
/* MENU deroulant*/
#menu-deroulant, #menu-deroulant ul {
    padding: 0;
    margin: 0;
    list-style: none;
}
#menu-deroulant {
	width:100%;
	background-color:grey;
	height:55px;
	top:15px;
}
 
#menu-deroulant li {
/* on place les liens du menu horizontalement */
    display: inline-block;
	margin-left:30px;
	text-align:center;
}
 
#menu-deroulant a {
    text-decoration: none;
    display: block;
	color:black;
	width:100%;
	margin-left: 30px;
	margin-right:50px;
}
#menu-deroulant ul #submenu{
    position: absolute;
/* on cache les sous menus complètement sur la gauche */
	display:none;
}
#menu-deroulant li:hover ul {
/* Au survol des li du menu on replace les sous menus */
    display:block;
}
 
/* Partie  2 */
div#presentation { 
	background-image:url("image/3.jpg");
	position:relative;
}
#presentation p{
	text-align:center;
	width:100%;	
	position:relative;
	margin:0;
}
.wel {
	text-decoration:none;
}

EN HTML

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<html>
	<head>
		<meta charset="utf-8">
		<title>Accueil</title>
		<link rel="stylesheet" type="text/css" href="style/style3.css" />
		<link rel="stylesheet" type="text/css" href="style/normalize.css" />
 
	</head>
 
	<body>	
	<div class="motSurImage">
		<img id="1" src="image/1.jpg" width="100%" height="100px">
		<p><a href=""> Écosia</a></p>
			</div>
		<div id="menu-deroulant">
			<ul>
					<li id="pp"><a href="index.html">Accueil</a></li>
 
					<li id="new"><a href="news.html">Actualité</a></li>
						<ul id="submenu">
							<li href="">Association </li>
							<li href="">Activité</li> 
						</ul>
 
				    <li id="pp"><a href="info.html">Information</a></li>
						<ul id="submenu">
							<li href="">Association</li>
							<li href="">Activité</li>
						</ul>
 
				    <li id="pp"><a href="orga.html">Organisation</a></li>
					<li id="pp"><a href="time.html">Calendrier</a></li>
					<li id="pp"><a href="other.html">Autre </a></li>
					<li id="pp"><a href="contact.html">Contact</a></li>
			</ul>
		</div>
 
 
			<div id="presentation" >
		  <!-- <img class="2" src="image/3.jpg" width="100%" height="50%">-->
 
				<p><a href="" class="wel">Bienvenu sur le site Écosia</a></p>
				<p><a href=""> 2</a></p>
				<p><a href=""> 3</a></p>
				<p><a href=""> 4</a></p>
				<p><a href=""> 4</a></p>
		   </div>
 
			<div id="avenir">
				<p><a href=""> 5</a></p>
				<p><a href=""> 6</a></p>
				<p><a href=""> 7</a></p>
				<p><a href=""> 8</a></p>
			 </div>
 
			<div id="temps">
				<ul>
					<li><a href=""> 9</a></li>
					<li><a href=""> 10</a></li>
					<li><a href=""> 11</a></li>
					<li><a href=""> 12</a></li>
					<li><a href=""> 13</a></li>
					<li><a href=""> 14</a></li>
				</ul>
				<div class="register">
					<a href=""> 15</a></li>
					<a href=""> 16</a></li>
		        </div>
			</div>	
 
			<div id="gatcha">
		</div>
 
			<div id="footer">
				<p>Dénos | Tous droits réservés</p>
			</div>
	</body>
</html>