Menu déroulant qui ne reste pas affiché sous ie6

**melanoche** · 07/12/2007, 14h32

Bonjour,

Je developpe un petit site en html/css:javascript, ou j'ai un petit menu qui se déroule au passage de la souris. Tout marche bien sous firefox, par contre sous ie6, au passage de la souris le menu se déroule bien, mais ne reste pas affiché et on ne peux donc cliquer sur aucun lien...

Voici mon 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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
 
<!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>Colorcode.fr - Accueil</title>
<link rel="stylesheet" type="text/css" href="Style/Style.css" media="screen" />
<script language="JavaScript" type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
 
 
<!--
//window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
 
</script>
</head>
 
<body>
<div id="conteneur">	
	<div id="logo1">
	<a href="index.html"><img src="images/logo_colorcode_vertical.jpg" border="0" width="54" /></a>
	</div>
 
  <div id="centre">
	  <div id="menu">
	   <dl>			
		  <dt><a href="index.html" style="color:#FFFFFF">accueil<br /><em>accueil</em></a></dt>
	    </dl>
 
		<dl>			
	      <dt> 
		    <a href="services.html" title="services" style="color:#FFFFFF">services<br />
	        <em>about us</em></a>
		  </dt>
	    </dl>	
		  <dl>	
		    <dt onmouseover="javascript:montre('smenu2');"> <a href="#" title="real" style="color:#FFFFFF">réalisations<br />
		      <em>works</em></a></dt>
 
				  <dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');" >
					<ul>
						<li><a href="outdoor.html">outdoor</a></li>
						<li><a href="wwf.html">WWF</a></li>
						<li><a href="kaora.html">Kaora Ethnic Rugby</a></li>
						<li><a href="trojka.html">Trojka</a></li>
						<li><a href="caterpillar.html">Caterpillar</a></li>
						<li><a href="sportmeca.html">Sport Meca</a></li>
						<li><a href="swimlon.html">Swinging London</a></li>
					</ul>
				  </dd>
		  </dl>
 
		  <dl>	
		    <dt><a href="philo.html" title="Philo" style="color:#FFFFFF">philosophie<br />
		      <em>philosophy</em></a></dt>
		 </dl>
		  <dl>
			  <dt><a href="staff.html" title="Staff" style="color:#FFFFFF">equipe<br /><em>staff</em></a></dt>
		  </dl>
		  <dl>
			  <dt><a href="contact.html" title="Contact" style="color:#FFFFFF">contact</a></dt>
		  </dl> 
	  </div>
 	<div id="flash" >
		<p style="color:#000000" align="center">flash</p>
	  </div>
		<script type="text/javascript">	  
		  // <![CDATA[
        var so = new SWFObject("Flash/accueil.swf", "accueil", "750", "550", "6", "#1c2126", true);
    so.addParam("quality", "best");
    so.addParam("loop", "false");
    so.addParam("scale", "exactfit");
    so.addParam("menu", "false");
    so.addParam("wmode", "transparent");
    so.addParam("allowScriptAccess", "sameDomain");
        so.write("flash");
                        // ]]>
		  </script>		
 </div>	
</div>
</body>
</html>

et voici ma CSS en ce qui concerne le menu :

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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
 
@charset "utf-8";
/* CSS Document */
 
body {
margin: 0px; 
padding: 0px;
background: #000000;
}
 
#conteneur{
	width: 1024px;
	top: 0;
	padding-top:  20px;
}
 
#logo1 {
	float: left;
  	padding-left: 15px;
	width: 54px; 
	vertical-align:top;
}
 
 
#centre {
	width: 800px; 
/*	float:left;*/
	height: 600px; 
	padding-top: 35px;
	padding-left: 10px;
	overflow: hidden;
}
 
 
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
top: 16px;
left: 71px;
z-index:100;
width: 800px;
padding-left: 15px;
}
#menu dl {
float: left;
width: 7em;
margin: 0 1px;
}
#menu dt {
cursor: pointer;
text-align: center;
color:#FFFFFF;
font-family:"Arial Rounded MT Bold", Arial, Verdana, sans-serif;
font-size: small;
background: #000000;
border: 0px;
width: 120px;
}
#menu dd {
border: 1px solid gray;
display:none;
width: 110px;
}
 
#menu li {
padding-left: 5px;
background: #FFFFEC;
}
 
#menu li a, #menu dt a {
font-family:"Arial Rounded MT Bold", Arial, Verdana, sans-serif;
font-size: small;
color: #000000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover {
background: #eee;
}
#flash {
width:750px;
height: 550px;
background-color:#FFFFFF;
}
td {
width:80px;
text-align:center;
}
 
.menu {
	font-family:"Arial Rounded MT Bold", Arial, Verdana, sans-serif;
	font-size:12px;
	color:#FFFFFF;
	text-decoration:none;
	}

J'ai fais pas mal de recherche mais ne trouve pas tellement de solution a mon problème...(en plus je débute !!)
Merci pour votre aide, j'en peux plus ça fais 3 jours que je suis la dessus !!

**Bisûnûrs** · 07/12/2007, 14h38

C'est un des problèmes du menu

Une solution consiste à mettre un timeout au moment où tu quittes le menu, qui vérifie si tu es encore dessus et le cas échéant fait un clearTimeout, mais bon ..

Une autre solution est d'aller voir la galerie CSS de Developpez :
http://css.developpez.com/galerie/

**melanoche** · 07/12/2007, 15h08

Merci Bisûnûrs, je pense qu'en effet un timer va me permettre de gérer mon soucis d'afichage. J'ai récupéré un code sur le lien que tu m'a donné. J'avais essayé le premier exemple, mais j'avais pas essayé avec un timer en effet.
Donc merci bien !

Et félicitation pour les excellents cours et tutoriels CSS et la FAQ CSS :cccol:

Menu déroulant qui ne reste pas affiché sous ie6

CSS

Discussions similaires

Partager

Partager