Bonjour!

Je fais appelle à votre aide, car malgré mon expérience et mes capacités habituelles à trouver mes solutions grâce à la magie de google, ici je n'y arrive pas.

C'est un petit menu déroulant bien simple en CSS.

Alors au premier niveau ça va. Tout fonctionne à merveille. Mais j'aimerais mettre une sous-sous-catégorie. Autrement dit un menu déroulant dans le menu déroulant. Ex: Catégorie > Élément 1 >*Élément 1.1

Dans firefox tout est #1.
Dans IE 7 (c'est un site à l'interne et tous les postes ont ça), lorsque je quitte le survol du sous-sous-menu pour aller ailleurs dans la page, et que je reviens dans le menu, ma sous-sous-catégorie est comme restée collée visuellement.

Quand je vais dans le menu :



Quand je sors et reviens (ma souris sur CATÉGORIE2), dans IE 7 :


Code HTML
Code xhtml : 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
<div id="menu" >
    <ul class="nav_princ">
        <li id="lien1" class="lienMenu">
            <a href="#" class="titreLien">Catégorie1</a>
            <div id="lien1Deroulant">
                <ul class="sousMenu">
                    <li><a href="#">Élément 1</a></li>
                    <li><a href="#">Élément 2</a></li>
                    <li><a href="#">Élément 3</a></li>
                </ul>
            </div>
        </li>
        <li id="lien2" class="lienMenu">
        	<a href="#" class="titreLien">Catégorie2</a>
            <div id="lien2Deroulant">
                <ul class="sousMenu">
                    <li><a href="#">Élément 1</a></li>
                    <li><a href="#">Élément 2</a></li>
                    <li id="sousMenuDir"><a href="#">Élément 3 >> </a>
 
                    <div>
                        <ul class="sousMenu">
                            <li><a href="#">Sous-élément 1</a></li>
                            <li><a href="#">Sous-élément 2</a></li>
                        </ul>
                    </div>
                    </li>
                </ul>
            </div>
        </li>
    </ul>
</div>

Ma CSS
Code css : 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
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
*{
	font-family:Helvetica, sans-serif
}
 
body{
	width:760px;
	margin-left:auto;
	margin-right:auto;
	position:relative;
}
 
/***************** MENU HAUT *******************/
 
#menu{
	margin: 0 ;
	background-color:#9CF;
	width:766px;
	height:36px;
	border-bottom:1px solid #CCC;
}
 
#menu ul.nav_princ{
	height:36px;
	list-style-type:none;
}
 
#menu ul.nav_princ li.lienMenu{
	height:36px;
	float:left;
}
 
#menu ul.nav_princ li.lienMenu a.titreLien{
	height:34px;
	display:block;
	padding: 10px 12px 0 12px;
	text-decoration:none;
	text-transform:uppercase;
	font-weight:bold;
	font-size:0.75em;
	color:#666;
}
 
#menu ul.nav_princ li.lienMenu a.titreLien:hover{
	background-color:#E5EEF7;
}
 
/************* MENU DÉROULANT *****************/
 
#lien1, #lien2, #sousMenuDir{
	color: inherit;
	position: relative;
	top:0;
	left:0;
	display: block; 
}
 
#lien1:hover #lien1Deroulant, #lien2:hover #lien2Deroulant, #sousMenuDir:hover div{ 
	display: block; 
}
 
#lien1Deroulant, #lien2Deroulant{
	width: 100%;
	display: none;
	overflow: visible;
	position: absolute; 
	top: 40px;
	left: 0;
	background-color: #E5EEF7;
	color: inherit;
}
 
#sousMenuDir div{
	width: 160px;
	display: none;
	overflow: visible;
	position: absolute; 
	top: 0;
	left: 95px;
	background-color: #E5EEF7;
	color: inherit;
}
 
 
ul.sousMenu{
	padding:2px 0;margin-left:0;
 
}
 
ul.sousMenu li{
	list-style-type:none;
	display: block;
	font-size: 12px;
	width: 104%;
	margin-left:0;
 
}
 
ul.sousMenu a{
	text-align: left;
	display: block;
	padding: 6px 1px 8px 12px;
	text-decoration:none;
	color:#444;
}
 
ul.sousMenu a:hover{
	text-align: left;
	display: block;
	background-color:#243036 /*#E99719*/ ;
	border-right:4px solid #E99719;
	color:#E5F6B8 /*#FFF*/ ;
}

Il semble que le carré bleu ne reste pas "collé" lorsque je quitte le survol en revenant par le menu, au lieu d'aller directement dans la page. Problème de :hover, conflit de position: relative? Je suis un peu perdu.

Il n'y a pas d'image, alors facile à recréer. J'espère ne pas trop m'être étendu en espérant que vous pouviez m'aider à démystifier cette épine.

EDIT: Je viens de découvrir que si je retire le background-color de mon menu déroulant il perd sa zone "de survol" dans IE 7.

Bref, je survol CATÉGORIE2 et s'il n'y a pas de background-color sur Élément1-2-3, ils deviennent inatteignables (ils disparaissent aussitôt que je descends). Dans IE 7 seulement.

C'est assez incroyable que ça soit le bgcolor qui définissent ma zone cliquable...je ne comprends rien.