Pb menu déroulant sous Firefox, mais fonctionnel sous IE7

**manu-lyon** · 05/05/2009, 23h06

Bonjour a tous,

je suis en train de faire un menu déroulant pour un intranet. J'ai voulu le faire en CSS afin de me passer du JavaScript pour ce menu. J'ai donc suivi le tuto proposé sur ce site. Après tous mes efforts je teste et surprise, il fonctionne sous IE7 mais pas sous FireFox 3 ! J'entends par 'fonctionner' le fait de passer la souris au dessus des rubriques pour en dérouler le contenu. le hover semble marcher sous Firefox (la couleur des rubriques change) mais il ne me déroule pas le sous menu.... Quelqu'un aurait une idée ? il ne doit pas manquer grand chose mais la je seche.... Merci a tous !

Code Html :

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
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>- Intranet IMJWEB - Accueil -</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
 
<body>
<div id="header">
 
<ul id="menu">
	<li><a href="#">Interventions</a></li>
 		<ul class="sousmenu">
    		<li><a href="#">Créer un ticket</a></li>
        	<li><a href="#">Liste des tickets</a></li>
        	<li><a href="#">Créer un compte rendu</a></li>
        	<li><a href="#">Recherche un compte rendu</a></li>
        	<li><a href="#">Gestion du planning</a></li>
		</ul>
	<li><a href="#">Clients</a></li>
    	<ul class="sousmenu">
    		<li><a href="#">Ajouter un client</a></li>
        	<li><a href="#">Liste des clients</a></li>
        	<li><a href="#">Recherche un client</a></li>
        	<li><a href="#">Liste des contacts</a></li>
		</ul>
	<li><a href="#">Statistiques</a></li>
    	<ul class="sousmenu">
    		<li><a href="#">Production</a></li>
        	<li><a href="#">Temps moyen de traitement</a></li>
        	<li><a href="#">Clients</a></li>
        	<li><a href="#">Codes sources</a></li>
            <li><a href="#">Site web</a></li>
		</ul>
	<li><a href="#">Technique</a></li>
    	<ul class="sousmenu">
    		<li><a href="#">Base de codes</a></li>
        	<li><a href="#">Liens utiles</a></li>
        	<li><a href="#">gestion des techniciens</a></li>
		</ul>
</ul>			
</div>
 
<div id="middle">
ici c'est le milieu
</div>
 
<div id="footer">
ici c'est le footer
</div>
</body>
</html>

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
 
@charset "utf-8";
/* CSS Document */
 
body{
	padding:0;
	margin:0;
}
 
#header{
	background:url(img/logo_recadre.jpg) no-repeat;
	height:100px;
	}
 
/* MENU */
#menu{
	list-style-type:none;
	margin:0;
	padding:0;
	border:0;
}
 
#menu li{
	float:left;
	margin:0;
	padding:0;
	border:0;
	width:200px;
}
 
#menu .sousmenu li{
	float:none;
	border:0;
	margin:0;
	padding:0;
}
 
#menu .sousmenu{
	list-style-type:none;
	margin:0;
	padding:0;
	border:0;
	display:none;
}
 
#menu li a:link, #menu li a:visited{
	font-size : 20px;
	display:block;
	height:1%;
	background:#999999;
	border-right:1px solid transparent;
	margin:0;
	padding: 4px 20px ;
	text-decoration:none;
}
 
 
 
#menu li a:hover{
	background-color:#666666;
}
 
#menu .sousmenu li {
	display:block;
	margin:0;
	border:0;
	border-top:1px solid transparent;
}
 
#menu .sousmenu li a{
	font-size : 15px;
}
 
#menu li:hover > .sousmenu{ 
	display: block; 
}

**Macmillenium** · 06/05/2009, 00h00

Bonsoir,

Il faudrait mettre le sousmenu entre les <li></li>

Code html :

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

1
2
3
4
5
6
7
8
9
 
	<li><a href="#">Interventions</a>
 		<ul class="sousmenu">
    		<li><a href="#">Créer un ticket</a></li>
        	<li><a href="#">Liste des tickets</a></li>
        	<li><a href="#">Créer un compte rendu</a></li>
        	<li><a href="#">Recherche un compte rendu</a></li>
        	<li><a href="#">Gestion du planning</a></li>
	</li>

**manu-lyon** · 09/05/2009, 19h26

en effet, ca roule.Erreur de ma part au départ donc.

Merci !!!

Pb menu déroulant sous Firefox, mais fonctionnel sous IE7

CSS

Discussions similaires

Partager

Partager