Bonjour à tous,
Je suis entrain de concevoir un menu déroulant mais je rencontre un problème.
En effet, mon menu fonctionne comme je le souhaite sauf sur IE7, lors du survol de l'onglet de niveau 1, le sous menu s'affiche mais impossible d'y accéder.
J'ai remarqué que ceci a un lien avec la position absolue que j'ai placé sur la div parent de mon menu. puisque quand j'enlève ce style, le sous-menu devient accessible mais évidemment n'est plus hors du flux ; ce qui pose quelques problèmes.
Ma question est : comment rendre mon sous-menu accessible sur IE7 en maintenant l'ensemble hors du flux et sans javascript.
Pendant que j'y suis, peut-être pourrez vous m'expliquer pourquoi avec IE8 installé sur mon poste, je tombe systématiquement sur une configuration mode navigateur IE8 et mode document IE7 quand j'essaie d'accéder à ma page.
Merci d'avance pour vos réponses.

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
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
			<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
			<title>test</title>
			<link href="./style.css" rel="stylesheet" type="text/css" />
 
	</head>
	<body>
		<div class="menu">
			<div class="monbloc">
				<ul>						
					<li>
						<a href="aaaaa">
							<span>
								aaaaaaa
							</span>
						</a>
					</li>
 
					<li>
						<a href="bbbbbbb">
							<span>
								bbbbbbbbbbb
							</span>
						</a>
					</li>
 
 
					<li>
						<a href="cccccccc">
							<span>
								ccccccccccccc
							</span>
 
						</a>
					</li>
 
					<li class="selected">
 
						<a href="dddddddd">
							<span>
								dddddddddddddddd
							</span>
						</a> 
 
						<ul>
							<li>
								<a href="1111111111">
									<span>111111111</span>
 
								</a>
							</li>
							<li>
								<a href="2222222">
									<span>2222222222</span>
								</a>
							</li>	
						</ul>
					</li>
 
				</ul>
			</div>
		</div>
	</body>
</html>

et la feuille de style
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
78
.menu{
	width: 100%;
	position: absolute;
	top: 71px;
	left: 0px;
	font-family: Tahoma;
	font-size: 13px;
}
.monbloc {
	font-weight: bold;
	font-size: 12px;
	left: 0px;
}
 
 
.monbloc > ul {
	list-style-type:none;
}
.monbloc > ul > li {
	float:left;
}
.monbloc > ul > li > a {
	text-decoration: none;
	color:red;
	display:block;
	height:20px;
}
.monbloc > ul > li > a > span {
	display:block;
	background-position:100% 0px;
	height:17px;
	margin-left:10px;
	padding-top:3px;
	padding-right:10px;
}
 
.monbloc > ul > li:hover > a {
	color:#000000;
	background-position: 0px -125px;
}
.monbloc > ul > li:hover > a > span {
	background-position: 100% -125px;
}
.monbloc > ul  > li.selected > a {
	color:#000000;
	background-position: 0px -125px;
	margin-top:-9px;
	height:29px;
}
.monbloc > ul  > li.selected > a > span {
	background-position: 100% -125px;
	height:22px;
	padding-top:7px;
}
.monbloc > ul  > li > ul {
	display: none;
	border: 1px solid #336699;
	padding:0px;
	margin:0px;
	list-style-type:none;
}
.monbloc > ul  > li:hover > ul {
	display: block;
}
.monbloc > ul  > li > ul > li {
	padding-top:3px;
	padding-bottom:3px;
}
.monbloc > ul  > li > ul > li:hover {
	background-color: #A0DAE6;
}
.monbloc > ul  > li  > ul > li  > a {
	text-decoration: none;
	color:#000000;
}
.monbloc > ul  > li > ul > li  > a > span {
	text-align:center;
}