Discussion :

[darkphenx]

Bonjour, j'ai un menu déroulant, qui fonctionne parfaitement sous IE7 et FF mais IE6 c'est du n'importe quoi... il ne se déroule plus... COmment puis-je faire?

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="pour-ie6-et-inferieur.css" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="pour-ie7.css" />
<![endif]-->

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
 
     #menuDeroulant {
           z-index : 100;
           position : absolute;
           float : left;
           top :7.3em ;
		   font-family:Arial, Helvetica, sans-serif;
           background : #ffffff;
           width : 90%;
           height : 22px;
           list-style-type : none;
           margin : 0;
           padding : 0;
           border : 1px solid #000000;
      }
     #menuDeroulant li {
           float : left;
           font-family : Arial, Helvetica, sans-serif;
           background-color : #cc6633;
           font-size : 11px;
           width : 140px;
           margin : 0;
           padding : 0;
           border : 0;
      }
     #menuDeroulant li a:link, #menuDeroulant li a:visited {
           display : block;
           height : auto;
           color : #fff;
		   font-family:Arial, Helvetica, sans-serif;
           background : #3b4e77;
           margin : 0;
           padding : 4px 8px;
           border-right : 1px solid #fff;
           text-decoration : none;
      }
     #menuDeroulant li a:hover {
	 		font-family:Arial, Helvetica, sans-serif;
           background-color : #cc6600;
      }
     #menuDeroulant li a:active {
	 		font-family:Arial, Helvetica, sans-serif;
           background-color : #5f879d;
      }
     #menuDeroulant .sousMenu {
	 		font-family:Arial, Helvetica, sans-serif;
           display : none;
           list-style-type : none;
           margin : 0;
           padding : 0;
           border : 0;
      }
     #menuDeroulant .sousMenu li {
	 	 		font-family:Arial, Helvetica, sans-serif;
           float : none;
           margin : 0;
           padding : 0;
           border : 0;
           width : 149px;
           border-top : 1px solid #cc3300;
           border-right : 1px solid #cc3300;
      }
     #menuDeroulant .sousMenu li a:link, #menuDeroulant .sousMenu li a:visited {
	 	 		font-family:Arial, Helvetica, sans-serif;
           display : block;
           color : #fff;
           margin : 0;
           border : 0;
           text-decoration : none;
           background : transparent url("images\fondTR.png") repeat;
      }
     #menuDeroulant .sousMenu li a:hover {
	 	 		font-family:Arial, Helvetica, sans-serif;
           background-image : none;
           background-color : #f2462e;
      }
     #menuDeroulant li:hover .sousMenu {
	 	 		font-family:Arial, Helvetica, sans-serif;
           display : block;
      }

Code html :

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
 
<ul id="menuDeroulant">
 
  <li> <a href="#">Qui sommes nous ?</a>
    <ul class="sousMenu">
 
      <li><a href="index.html">Qui sommes nous?</a></li>
 
      <li><a href="Equipe.html">Notre &eacute;quipe</a></li>
 
	  <li><a href="volonté.html">Notre volonté</a></li>
	  <li><a href="partenaire.html">Nos partenaires</a></li>
 
    </ul>
 
  </li>
 
    <li> <a href="#">Notre activité</a>
    <ul class="sousMenu">
 
      <li><a href="Services.html">Nos services</a></li>
 
      <li><a href="Logiciels.html">Nos logiciels</a></li>
	</ul>
	</li>
 
  <li> <a href="#">Nos r&eacute;alisations</a>
    <ul class="sousMenu">
 
      <li><a href="Rollcutting.html">Rollcutting</a></li>
	  <li><a href="classe.html">Classe Pupitre</a></li>
 
    </ul>
 
  </li>
 
  <li> <a href="Contact.html">Nous contacter</a> </li>
 
  <li> <a href="Espace_Clients/index.php">Espace Client</a> </li>
  <li> <a href="emploi.html">Offre d'emploi</a> </li>
  <li> <a href="actu.html">Actualit&eacute;s</a>
 
 
  </li>
 
</ul>

Merci d'avance

[Bisûnûrs]

La pseudo-classe hover ne s'applique que sur des éléments a avec IE6, et non sur des éléments li.

[Kerod]

En effet, donc si tu veux que ton display soit pris en compte il faudrait le faire grâce à la balise a qui devra prendre toute la taille de ton li.

Sinon il y a la solution javascript

[darkphenx]

arf, ok, merci à vous deux.