Discussion :

[devyan]

J'ai commencé un menu déroulant vertical, tout va bien avec FF2 et 3, OPERA 9.5 et SAFARI 3. J'ai effectué de petits ajustements de présentation pour IE7 mais avec IE6 j'obtiens un comportement plus que bizarre.

1/ il y a des décalages dans le rendu vertical : le texte des items du sous-menu apparaissent 1pixel trop bas lors de l'affichage initial ce qui décale tous les éléments suivants (cf. pièce jointe : IE6 à gauche, FF à droite)

2/ (encore plus étrange) lors du survol d'un item je modifie la couleur de fond et là le texte se positionne correctement MAIS les éléments suivants sont à nouveau décalés.

voici le 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
#menu .level1 {
	position: relative; 
	list-style: none outside none; line-height: 0; font-size: 0;
	margin: 0px 0px 1px 0px; padding: 0px 0px 5px 0px; 
	overflow: hidden; vertical-align: bottom;}
#menu .level1 .item1 {
	position: relative; 
	margin: 0px 0px 0px 0px; padding: 0px 20px 0px 5px; vertical-align: baseline;
	font-family: Tahoma, Arial; font-size: 11px; font-weight: bold; line-height: 16px; height: 16px; text-align: center;}
#menu .level1 .subitems {
	position: relative; 
	line-height: 0; font-size: 0;
	overflow: hidden; vertical-align: baseline;
	border-top-style: solid; border-top-width: 1px; 
	border-bottom-style: solid; border-bottom-width: 1px;  
	margin: 0px 1px -1px 1px; padding: 0px 0px 0px 0px;}
#menu .level1 .subitems .level2 {
	list-style: none outside none; 
	line-height: 0; font-size: 0;
	margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; 
	overflow: hidden; vertical-align: top; /*display: none;*/}
#menu .level1 .subitems .level2 .item2 {
	margin: 0px 1px; vertical-align: baseline;
	font-size: 0; vertical-align: top; 
	border-left-style: solid; border-left-width: 1px; 
	border-right-style: solid; border-right-width: 1px; 
	border-bottom-style: solid; border-bottom-width: 1px;}
#menu .level1 .subitems .level2 .item2 span,
#menu .level1 .subitems .level2 .item2 a {
	display: block; width: auto; top: 0;
	padding: 0px 5px; 
	font-family: Tahoma, Arial; text-decoration: none; line-height: 12px; height: 12px; font-size: 10px; vertical-align: top; text-align: left; color: black;}
 
/* ---- Ajustement spécifiques IE7 ------------------------------------------------- */
*+html #menu .level1           {padding: 0px 0px 4px 0px; min-height: 18px; } 
*+html #menu .level1 .subitems {margin-bottom: 0px; font-size: 0.01em;}
*+html #menu .level1.empty     {min-height: 16px;}
 
/* ----  Personnalisation par défaut ---------------------------------------------- */
#menu .level1 {background-color: #7E7E7E;}
#menu .level1 .item1 {background-color: #7E7E7E; color: white;}
#menu .level1 .subitems {border-top-color: #0A0A0A; border-bottom-color: #CDCDCD;}
#menu .level1 .subitems .level2 .item2 {
	border-bottom-color: #777777; border-left-color: #777777; 
	border-right-color: #777777; background-color: #BFBFBF; color: black;}
#menu .level1 .subitems .level2 .item2 span,
#menu .level1 .subitems .level2 .item2 a {color: black;}
#menu .level1 .subitems .level2 .item2 a:hover {background-color: #DADADA; padding-left: 10px;}

et un exemple 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
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
	    <div id="menu" style="position: absolute; top: 30px; left: -120px; height: 400px; width: 151px;">
		  <ul class="level1 rouge">
			<li class="item1"><span>menu 1</span></li>
			<li class="subitems">
				<ul class="level2">
					<li class="item2"><a href="#1-1">item 1-1</a></li>
					<li class="item2"><a href="#1-2">item 1-2</a></li>
				</ul>
			</li>
		  </ul>
		  <ul class="level1 bleu">
			<li class="item1"><span>menu 2</span></li>
			<li class="subitems">
				<ul class="level2">
					<li class="item2"><a href="#2-1">item 2-1</a></li>
					<li class="item2"><a href="#2-2">item 2-2</a></li>
					<li class="item2"><a href="#2-3">item 2-3</a></li>
				</ul>
			</li>
		  </ul>
		  <ul class="level1 empty bleu">
			<li class="item1"><span>menu 3</span></li>
			<li class="subitems">
				<ul class="level2">
					<li class="item2"><a href="#3-1">item 1-1</a></li>
					<li class="item2"><a href="#3-2">item 1-2</a></li>
				</ul>
			</li>
		  </ul>
		  <ul class="level1 ">
			<li class="item1"><span>menu 4</span></li>
			<li class="subitems">
				<ul class="level2">
					<li class="item2"><a href="#4-1">item 4-1</a></li>
					<li class="item2"><a href="#4-2">item 4-2</a></li>
					<li class="item2"><a href="#4-3">item 4-3</a></li>
					<li class="item2"><a href="#4-4">item 4-4</a></li>
				</ul>
			</li>
		  </ul>
		  <ul class="level1 vert">
			<li class="item1"><span>menu 5</span></li>
			<li class="subitems">
				<ul class="level2">
					<li class="item2"><a href="#5-1">item 5-1</a></li>
					<li class="item2"><a href="#5-2">item 5-2</a></li>
					<li class="item2"><a href="#5-3">item 5-3</a></li>
					<li class="item2"><a href="#5-4">item 5-4</a></li>
				</ul>
			</li>
		  </ul>
		  <ul class="level1 jaune">
			<li class="item1"><span>menu 6</span></li>
			<li class="subitems">
				<ul class="level2">
					<li class="item2"><a href="#6-1">item 6-1</a></li>
					<li class="item2"><a href="#6-2">item 6-2</a></li>
				</ul>
			</li>
		  </ul>
		</div>

J'ai essayé différentes valeurs de DocType mais cela ne semble pas provenir de là.

Merci d'avance...