Décalage du au menu

Bonjour, je vais essayer d'uploader des screens pour vous aider,

Bon alors mon site se décompose en 4 parties (banniere, menudéroulant, corps, design, pied de page).

Code:

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
79
80
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
</head>
<body>
<div id="banniere">
<object type="application/x-shockwave-flash" data="banniere_soleil.swf" width="559" height="150">
<param name="movie" value="banniere_soleil.swf" />
<param name="loop" value="false" />
<param name="border" value="false" />
<embed src="images/banniere_soleil.swf" width="559" height="150" loop="false" movie="banniere_soleil.swf" border="false"></embed>
</object>
</div>
 
<ul id="menuDeroulant">
		<li>
			<a href="#">Qui sommes nous ?</a>
			<ul class="sousMenu">
				<li><a href="#">Qui sommes nous?</a></li>
				<li><a href="#">Notre équipe</a></li>
			</ul>
		</li>
 
		<li>
			<a href="#">Nos services</a>
			<ul class="sousMenu">			      
				<li><a href="#">Etude, Audit, Conseil</a></li>
				<li><a href="#">Développement d'applications métiers</a></li>
				<li><a href="#">Concéption de site Internet</a></li>
				<li><a href="#">Ventes, Installation, et Maintenance</a></li>
				<li><a href="#">Suivi de votre système d'informations</a></li>
				<li><a href="#">Vente de consommables informatiques</a></li>
			</ul>
		</li>
		<li>
			<a href="#">Nos logiciels</a>
			<ul class="sousMenu">			      
				<li><a href="#">Gestion commerciales déstinées aux entreprises de négoces</a></li>
				<li><a href="#">Gestion d'achats</a></li>
				<li><a href="#">Gestion des temps (Pointage, Contrôle de présence,...)</a></li>
				<li><a href="#">Gestion des notes de frais</a></li>
				<li><a href="#">Dispatch EDI</a></li>				
				<li><a href="#">Suivi VPN</a></li>
				<li><a href="#">Pour tous développement spécifiques, Contactez-nous.</a></li>
 
			</ul>
		</li>
		<li>
			<a href="#">Nos réalisations</a>
			<ul class="sousMenu">			      
				<li><a href="#">Rollcutting</a></li>
			</ul>
			</li>
 
			<li>
			<a href="#">Nous contacter</a>
			</li>
 
			<li>
			<a href="#">Espace Client</a>
			</li>
 
			<li>
			<a href="#">Actualités</a>
			<ul class="sousMenu">			      
				<li><a href="#">Actualités</a></li>
				<li><a href="#">News</a></li>				
			</ul>
			</li>
	</ul>
 
</div>
 
<div id="corps">
<p>Voici l'actu du moment.</p>
</div>
<div id="design">
</div>
<div id="pied_de_page">
<p align="center"></p>
</div>
</body>

et le css qui l'accompagne:

Code:

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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
/* CSS Document */
* {
  margin: 0;
  padding:0;
}
 
body
{
width: 90%;
margin:auto;
margin-top: 20px;
margin-bottom: 20px;
background-color:#CC9933;
 
}
 
#banniere
{
width:90%;
height:150px;
float:left;
background-color:#FFFFFF;
border:1px solid #000000;
}
 
#menuDeroulant
{
float:left;
background:#FFFFFF;
width: 90%;
height: auto;
list-style-type: none;
margin: 0;
padding: 0;
border:solid 1px #000000;
	}
#menuDeroulant li
{
	float: left;
	font-family:Arial, Helvetica, sans-serif;
	background-color:#CC6633;
	font-size:11px;
	width: 112px;
	margin: 0;
	padding: 0;
	border: 0;
}
#menuDeroulant li a:link, #menuDeroulant li a:visited
{
	display: block;
	height: auto;
	color: #FFF;
	background: #3B4E77;
	margin: 0;
	padding: 4px 8px;
	border-right: 1px solid #fff;
	text-decoration: none;
}
#menuDeroulant li a:hover {
background-color:#CC6600 top;
}
#menuDeroulant li a:active { 
background-color: #5F879D; 
}
 
#menuDeroulant .sousMenu
{
	display: none;
	list-style-type: none;
	margin: 0;
	padding: 0;
	border: 0;
}
#menuDeroulant .sousMenu li
{
	float: none;
	margin: 0;
	padding: 0;
	border: 0;
	width: 149px;
	border-top: 1px solid transparent;
	border-right: 1px solid transparent;
}
#menuDeroulant .sousMenu li a:link, #menuDeroulant .sousMenu li a:visited
{
	display: block;
	color: #FFF;
	margin: 0;
	border: 0;
	text-decoration: none;
	background: transparent url("images\fondTR.png") repeat;
}
#menuDeroulant .sousMenu li a:hover
{
	background-image: none;
	background-color: #F2462E;
}
 
#menuDeroulant li:hover  .sousMenu { display: block; }
 
#corps
{
float:none;
width:90%;
background-color:#FFFFFF;
margin-left:0px;
margin-bottom:0px;
padding-left:0px;
padding-bottom:0px;
border:solid 1px #000000;
 
}
 
#Pied_de_page
{
float:left;
width:90%;
background-color:#FFFFFF;
margin:0;
padding:0;
border:solid 1px #FFFFFF;
}

C'est en ordre, bien comme je le souhaité. Mais quand je survol une partie du menu déroulant, le corps (qui est juste en dessous du menu) se décale en dessous du menu dont l'arborescence est développée. Comment pourrais-je faire pour que le menu passe au dessus du corps?

Merci d'avance,
Salutations.

Dans ta déclaration de #menuDeroulant, rajoute :

Code:

position:absolute;

Merci pour ta réponse rapide, (plus que le mienne :P ) mais cela ne semble ^pas convenir, si je rajoute cette ligne, mon vient se coller en haut de la page, au dessus et à droite de la banniere qui est censée le précedé.:(

Dans ce cas n'oublie pas de renseigner top et left :
Code:

1 2 3 position:absolute; top:100px; left:200px;

:aie: Super merci, Désolé du dérangement pour finalement si peu. :aie:

A+

Bonjour, de nouveau un petit souci, concernant le même sujet, (donc je n'ai pas ré-ouvert un nouveau topic).

Donc l'ancien problème est résolu, a savoir que le menu n'agrandi plus sa fenetre et ne décale plus le corps. Ceci dit, quand mon menu se développe, il reste en arriere plan.

Que faire?!

Merci,:aie:

Mettre un z-index plus grand sur ton menu.
Code:

1 2 3 4 5 6 #menuDeroulant{ z-index:100; } #corps{ z-index:1; }

Raaaaaaaaah, c'est génial, Merci à toi. (Vas vraiment falloir que je m'achete un bouquin sur Xhtml/CSS moi).

Merci encore. ++
;)