Menu déroulant masqué [Résolu]

[carden752]

Bonjour, je crée un site et je veux faire un menu déroulant masqué.
Cependant, il marche bien sur Firefox mais pas sur IE.

Code :

1
2
3
4
5
6
7
8
9
10
 
<ul id="menuDeroulant">
<li><a href="#">jours</a>
    <ul class="sousMenu">
      <li><a href="#">Lundi</a></li>
      <li><a href="#">Mardi</a></li>
      <li><a href="#">Mercredi</a></li>
    </ul>
</li>
</ul>

Et sur ma feuille de style CSS, j'ai défini cela.

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
 
#menuDeroulant
{
height: 21px;
width:97%;
list-style-type: none;
margin: 0;
margin-left:1em;
padding: 0;
border: 0;
position: absolute;
top: 150px;
left: 0;
}
#menuDeroulant li
{
float: left;
width: 150px;
margin: 0;
padding: 0;
border: 0;
}
#menuDeroulant li a:link, #menuDeroulant li a:visited
{
display: block;
height: 21px;
color: #FFF;
background: #3B4E77;
margin: 0;
padding: 4px 8px;
border-right: 1px solid #fff;
text-decoration: none;
}
#menuDeroulant li a:hover { background-color: #F2462E; }
#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 li a:hover > .sousMenu li a:hover
{
background-image: none;
background-color: rgb(153, 51, 153);
}
#menuDeroulant .sousMenu li a:link, #menuDeroulant .sousMenu li a:visited
{
color: #fff;
margin: 0;
border: 0;
text-decoration: none;
background-color: #5F879D;
}
#menuDeroulant li a:hover > .sousMenu { display: block;}

Qu'est-ce que je n"ai pas bien fait pour avoir le résultat escompté, c'est à dire un menu déroulant à 2 niveaux.
Je vous remercie d'avance de votre aide.

[LhIaScZkTer]

Salut carden752

Tu dois remplacer :

Code :

#menuDeroulant li a:hover > .sousMenu { display: block;}

Par :

Code :

#menuDeroulant li:hover > .sousMenu { display: block;}

.sousMenu n'est pas le fils de a:hover, mais le fils de li. D'ailleurs :

Code :

#menuDeroulant li:hover .sousMenu { display: block;}

fonctionne très bien.

Donc, le rollover est sur le li et non sur le a

Voilà, bonne journée.