menu déroulant sous IE

**dr_feelgood** · 14/06/2010, 18h12

Bonjour,

je me suis inspiré du menu déroulant Testos pour ma propre application. Il fonctionne sous Firefox, mais ne se déroule pas sous IE.

Aujourd'hui j'ai repris le CSS original et je l'ai remis une 2e fois dans mes scripts. J'ai également élagé mon script pour ne laisser que les élémens nécessaires pour tester que le menu déroulant

voici le lien http://www.cnrms-maia.org/menu11.php

et voici le script

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
<html>
	<HEAD>
	<title>RMS menu</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
    <META NAME="robots" CONTENT="noindex,nofollow"/>
	<link rel="stylesheet" href="css/maia.css" type="text/css" title="default media="screen" />
</HEAD>
 
<BODY>
 
<?php
echo '<ul id="menuDeroulant">';
 
		echo '<li>';
			echo '<a href="#">identifiants</a>';
			echo '<ul class="sousMenu">';
				echo '<li><a href="menu.php?page=list">liste des identifiants</a></li>';
				echo '<li><a href="menu.php?page=identifiant">calcul d\'un identifiant</a></li>';
				echo '<li><a href="menu.php?page=inclusion">inclure un patient</a></li>';		
			echo '</ul>';
 
		echo '</li>';
		echo '<li>';
			echo '<a href="#">saisie</a>';
			echo '<ul class="sousMenu">';			      
				echo '<li><a href="menu.php">FMAM</a></li>';
				echo '<li><a href="menu.php">FMAS</a></li>';
				echo '<li><a href="menu.php">FMAP</a></li>';
 
			echo '</ul>';
		echo '</li>';
		echo '<li>';
			echo '<a href="#">visualisation</a>';
 
			echo '<ul class="sousMenu">';			      
				echo '<li><a href="menu.php?page=fmamtotres">totaux FMAM</a></li>';
				echo '<li><a href="menu.php?page=fmastotres">totaux FMAS</a></li>';
				echo '<li><a href="menu.php">totaux FMAP</a></li>';
			echo '</ul>';
		echo '</li>';
		echo '<li>';
			echo '<a href="#">statistiques</a>';
 
			echo '<ul class="sousMenu">';			      
				echo '<li><a href="essai_excel.php">essai excel</a></li>';
 
				echo '<li><a href="essai_geolocalisation.php">géolocalisation</a></li>';
				echo '<li><a href="menu.php">ultérieur</a></li>';
			echo '</ul>';
		echo '</li>';
		echo '<li>';
 
			echo '<a href="#">accès</a>';
 
			echo '<ul class="sousMenu">';			      
				echo '<li><a href="menu.php?page=password">mon mot de passe</a></li>';
				echo '<li><a href="menu.php?page=mdp1">Mot de passe d\'un utilisateur</a></li>';
				echo '<li><a href="utilitaire.php">utilitaires</a></li>';
				echo '<li><a href="menu.php?page=documents">documents</a></li>';
				echo '<li><a href="menu.php?page=aide">aide</a></li>';
				echo '<li><a href="deconnexion.php">deconnexion</a></li>';		
			echo '</ul>';
		echo '</li>';
 
	echo '</ul>';
?>
 
</BODY>
</HTML>

et 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
82
83
84
85
86
87
body
{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background: #ddccff ;
background-color: #ddccff;
padding: 0;
margin-top: 10px;
margin-left: 20px;
margin-right: 50px;
}
 
/* ------------------------------------------------------------------------------------
Tha Drop-down Menu
------------------------------------------------------------------------------------ */
 
/* Elements de premier niveau
--------------------------------------*/
#menuDeroulant
{
 
	width: 805px;
	height: 21px;
	list-style-type: none;
	margin: 0;
	padding: 0;
	border: 0;
	position: absolute;
	top: 70;
	left: 280;
}
#menuDeroulant li
{
	float: left;
	width: 161px;
	margin: 0;
	padding: 0;
	border: 0;
}
#menuDeroulant li a:link, #menuDeroulant li a:visited
{
	display: block;
	height: 20 %;
	color: #FFF;
	background: #3B4E77;
	margin: 0;
	padding: 4px 8px;
	border-right: 1px solid #fff;
	text-decoration: none;
}
#menuDeroulant li a:hover { background-color: #4B24C0; }
#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: 160px;
	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("../IMG/fndTRP.png") repeat;
}
#menuDeroulant .sousMenu li a:hover
{
	background-image: none;
	background-color: #4B24C0;
}
 
#menuDeroulant li:hover > .sousMenu { display: block; }

pour moi tout semble ok, mais j'ai toujours le même problème, le script ne fonctionne pas sous IE (alors que l'exemple de Testos fonctionne très bien)

Quelqu'un aurait une idée ? ou voit où se trouve l'erreur ?

Merci de votre aide

**devyan** · 15/06/2010, 10h22

Bonjour,

Le problème vient de la dernière ligne du CSS fourni

Code :

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

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

En effet, IE ne reconnait ni "li:hover" ni le sélecteur ">"
Donc le "sousMenu" n'apparaît pas.

J'ai peur qu'il faille ajouter un peu de JavaScript pour le fonctionnement sous IE

devyan

**dr_feelgood** · 15/06/2010, 17h44

J'ai vérifié ce point, en cherchant à résoudre le problème avant de poster ma question.
Il semblerait que le hover fonctionne sur IE 7 et 8.

De toute façon voila le lien de ce menu déroulant

http://www.marcarea.com/code/css/menu/menu01test.html

et j'ai testé ce menu qui fonctionne parfaitement sous IE7 et 8 ...

Il doit y avoir autre chose

menu déroulant sous IE

CSS

Vue hybride

Discussions similaires

Partager

Partager