Discussion :

[tintin72]

Bonjour,

Je n'arrive pas à allier menu horizontal déroulant en css
et le contexte de formatage.

Voici mon code:

html:

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
<div id="header">
 
<div id="menu">
 
<ul class="level0">
<li ><a href="" />Accueil</a></li>
<li ><a href="" />Présentation</a>
	<ul class="level1">
	<li ><a href="" />Qui sommes nous</a></li>
	<li ><a href="" />Nos valeurs</a>
		<ul class="level2">
		<li><a href="" />Principes</a></li>
		<li><a href="" />Stratégie</a></li>
		</ul>
	</li>
	<li ><a href="" />Nos partenaires</a></li>
	</ul>
</li>
<li ><a href="" />Services</a></li>
<li class="active"><a href="" />Références</a>
	<ul class="level1">
	<li class="active"><a href="" />Réalisations</a></li>
	<li class="active"><a href="" />Témoignages</a></li>
	</ul>
</li>
<li >
<a href="" />Contact</a></li>
</ul>
 
</div>
</div>

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
#header {
  overflow: hidden;
  border-bottom: 1px dashed black;
}
 
 
#menu ul ul {
display: none; 
position: absolute; 
left: 100px;
top: 0; 
margin:0px;
padding: 0px; 
border: 1px solid grey;
}
 
/* Rend le menu horizontal. */
#menu ul.level1 {
left: 0px; 
top: 19px; /* */
}
 
#menu ul.level2 {
left: 104px; /**/ 
top: 0;
}
/*-------------------------*/
 
#menu li {
float: left;
list-style-type: none; 
position: relative; 
width: 100px; 
background-color: #E0E0E0; 
padding: 2px; 
margin: 0px;
}
 
#menu li:hover {
background-color: #FFFF70;
}
 
#menu li:hover ul.level1, #imagemenu li li:hover ul.level2 {
display: block;
}

Le menu déroulant fonctionne très bien mais l'overflow: hidden
dans le div header empêche les sous menu de s'afficher.

Quelqu'un pourrait m'aider ?

Merci

[Candygirl]

Hello,

Il y a plusieurs propriétés qui permettent d'établir un nouveau contexte de formatage. En css2.1:

Floats, absolutely positioned elements, inline-blocks, table-cells, table-captions, and elements with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts.

Dans ton cas l'overflow n'est pas adapté mais un float pourrait faire l'affaire (assorti d'un width de 100% suivant le contexte), il me semble.

[tintin72]

En effet, un float left avec un width 100% semblent faire l'affaire.

Merci.