Menu déroulant OK sous Firefox NOK sous IE

**Goltar** · 11/05/2011, 21h47

Bonsoir à tous,
J'essaie d'adapter un menu déroulant pour mon site.
Il fonctionne à merveille sous firefox, mais rechigne sous IE

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
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
#menuDeroulant
{
	background: #6A6458;
	width: 700px;
	height: 21px;
	list-style-type: none;
	margin: 0;
	padding: 0;
	border: 0;
	position: absolute;
	top: 176px;
	left: 105px;
	z-index: 0;
	float: Aucune;
}
#menuDeroulant li
{
	float: left;
	width: 150px;
	margin: 0;
	padding: 0;
	border: 0;
	list-style-type: none;
}
#menuDeroulant li a:link, #menuDeroulant li a:visited
{
	display: block;
	height: 1%;
	color: #FFF;
	background: #3B4E77;
	margin: 0;
	padding: 4px 8px;
	border-right: 1px solid #fff;
	text-decoration: none;
	list-style-type: none;
}
#menuDeroulant li a:hover {
	background-color: #F2462E;
	list-style-type: none;
}
#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 .sousMenu li a:link, #menuDeroulant .sousMenu li a:visited
{
	display: block;
	color: #FFF;
	margin: 0;
	border: 0;
	text-decoration: none;
	background: transparent url("fondTR.png") repeat;
}
#menuDeroulant .sousMenu li a:hover
{
	background-image: none;
	background-color: #F2462E;
	list-style-type: none;
}
 
#menuDeroulant li:hover > .sousMenu {
	display: block;
	list-style-image: none;
	list-style-type: none;
}

et le 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
<div id="PorteMenu" style="height:25px;">
<ul id="menuDeroulant">
 
		<li>
			<a href="#">Les castors</a>
			<ul class="sousMenu">
				<li><a href="#">Pelage doux mais robuste </a></li>
				<li><a href="#">Ils confectionnent des barrages !</a></li>
 
				<li><a href="#">Ils ont des grandes dents</a></li>		
			</ul>
 
		</li>
		<li>
			<a href="#">Partie 2</a>
			<ul class="sousMenu">			      
				<li><a href="#">whisky</a></li>
				<li><a href="#">vodka</a></li>
 
				<li><a href="#">gin</a></li>
 
				<li><a href="#">vin</a></li>
				<li><a href="#">champagne</a></li>
			</ul>
		</li>
		<li>
			<a href="#">Partie 3</a>
 
			<ul class="sousMenu">			      
				<li><a href="#">pommes</a></li>
 
				<li><a href="#">poires</a></li>
				<li><a href="#">ananas</a></li>
				<li><a href="#">pamplemousse</a></li>
				<li><a href="#">banane</a></li>				
				<li><a href="#">raisins</a></li>
 
				<li><a href="#">framboises</a></li>
 
				<li><a href="#">fraises</a></li>
				<li><a href="#">mirabelles</a></li>
				<li><a href="#">groseilles</a></li>
			</ul>
		</li>
		<li>
 
			<a href="#">Partie 4</a>
 
			<ul class="sousMenu">			      
				<li><a href="#">tomates</a></li>
				<li><a href="#">haricots</a></li>
				<li><a href="#">carrottes</a></li>
				<li><a href="#">choux</a></li>
				<li><a href="#">concombres</a></li>				
				<li><a href="#">courgettes</a></li>
 
				<li><a href="#">endives</a></li>
				<li><a href="#">navets</a></li>
				<li><a href="#">epinards</a></li>
				<li><a href="#">avocat</a></li>
			</ul>
		</li>
 
	</ul>
 
	</div>

Si quelqu'un pouvait m'éclairer, j'en serais ravi !
Voila de nombreuses heures que je me creuse la tête,
GGGrrrrr j'aime pas IE

**NoSmoking** · 11/05/2011, 22h10

Bonjour,
déjà il n'y a pas une once de javascript, le forum HTML voir CSS aurait peu être été mieux adapté

Il fonctionne à merveille sous firefox, mais rechigne sous IE

cela ne va pas nous aider beaucoup...

GGGrrrrr j'aime pas IE

pourquoi tant de haine?

**w3ar3dus1** · 12/05/2011, 01h31

Certes le forum CSS est bien plus adapté.

Quoi qu'il en soit.

Code :

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

1
2
3
 
z-index: 0; /* Inutile car 0 est la valeur par défaut, mets 100 par exemple */
float: Aucune; /* Aucune n'existe pas, c'est none */

Déjà, pense bien que tu devrait afficher/masquer ul pas li. Ensuite le :hover doit être sur le parent de ton sous menu.

De cette manière, par défaut ton ul de sous menu est masqué et quand la souris vas sur le titre d'une section du menu, tu affiche le sous menu enfant.

exemple :

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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
 
<!DOCTYPE html>
<html >
<head>
  <title>Titre</title>
  <style rel="stylesheet" type="text/css">
    * {
      margin: 0px;
      padding: 0px;
      color: #fff;
    }
    ul {
      display: block;
      width: 100px;
      list-style: none;
      background: blue;
    }
    li {
        display: block;
        position: relative;
    }
    a {
      display: block;
    }
    a:hover {
      background: red;
    }
    #menu {
      margin: 50px;
    }
    .niveau-permier-titrage {
      height: 20px;
    }
    /*** Sous menu ***/
    #menu ul {
      display: none;
      position: absolute;
      left:  0px;
      top: 20px;
      z-index: 100;
    }
    #menu li:hover {
      background: red;
    }
    #menu li:hover ul {
      display: block;
    }
  </style>
</head>
<body>
  <ul id="menu">
    <li>
      <a href="#" class="niveau-permier-titrage">Les castors</a>
      <ul>
        <li><a href="#">Pelage doux mais robuste</a></li>
        <li><a href="#">Ils confectionnent des barrages</a></li>
      </ul>
    </li>
  </ul>
</body>
</html>

J'ai pas tester sur IE car je suis sur mon deuxième mac qui n'as pas de VM, mais il me semble que ça doit marcher. Sauf (roulements de tambour) IE6 qui ne gère :hover que sur les <a />, donc soit tu cherche un fix en googlant genre "selector :hover ie6", soit tu fait un fallback en javascript, soit tu essaye une autre structure comme le ul de sous menu dans a.niveau-permier-titrage mais ça passe pas dans toutes les specs. De mémoire xhtml1 strict doit accepter les a en tant que conteneur et html5 je suis quasi sûr.

Bref, bon courage.

PS: Patience IE6 va bientôt mourir. Et pour IE > 6, bah... Faut faire avec

.

**Goltar** · 12/05/2011, 06h10

Bonjour à tous,
En effet dans la bonne rubrique ceux mieux. Désolé !
Bon bein ! une nouvelle journée s'annonce

remettons sur le metier....
Merci pour vos post, je m'en vais de ce pas les tester.

**Goltar** · 12/05/2011, 06h32

@w3ar3dus1
J'ai testé ta proposition, et là encore sur Firefox pas de problème, sur IE il ne se déroule pas !

Crédieu ! Quand vont-il accorder leurs violons. S'ils pouvaient tous se pencher sur le problème et avancer dans la même direction au lieu de se tirer dans les pattes. [Utopie quand tu nous tient !]

**w3ar3dus1** · 12/05/2011, 09h40

Hum, bizarre que ça ne marche pas, j'ai pas de problème avec ce genre de chose d'habitude, j'ai du zapper une propriété.
Mais t'as tester sur quel version de IE par curiosité?

Mon exemple est peut être mauvais, honte à moi, mais le raisonnement reste bon par contre.

Cherche sur google il y a plein de ressources :
http://divitodesign.com/css/how-to-dropdown-css-menu/
http://csswizardry.com/2011/02/creat...dropdown-menu/

Trouvé en 2s, ces ressources (en anglais), utilisent la même technique que moi, mais j'imagine que leurs exemples marche.

**Goltar** · 12/05/2011, 09h58

Bonjour,
J'utilise IE 9

**Goltar** · 12/05/2011, 11h09

Problème résolu en appliquant la solution trouvée là ==> http://javascript-array.com/scripts/...rop_down_menu/

Menu déroulant OK sous Firefox NOK sous IE

CSS

Discussions similaires

Partager

Partager