Bonjour à toutes et tous,

j'ai fait un menu en html/css.

Cependant, je ne sais pas pourquoi, le menu est décalé du haut de la cellule.

Pour plus de compréhension, voici mes codes :

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
#menu{
	width:150px;
}
.menu, .sousmenu{
	text-align: right;
}
.menu{
	height:18px;
	width:150px;
	color:#fff;
	padding-bottom: 10px;
	top:auto;
	font-family:arial,sans-serif;
	font-size:12px;
	text-decoration:none;
}
.sousmenu{
	height:14px;
	width:170px;
	padding: 0px;
	color:#ffffff;
	text-align: right;
}
.menu a{
	display:block;
	width:100%;
	height:100%;
	color:#fff;
	font-family:arial,sans-serif;
	font-size:12px;
	text-decoration:none;
}
.sousmenu a{
	display:block;
	width:100%;
	height:100%;
	color:#666666;
	font-family:Garamond;
	font-size:18px;
	text-decoration:none;
}
.sousmenu a:hover, .sousmenu a:active, .sousmenu a:focus{
	color:#ffffff;
}
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
<!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" />
<meta name="robots" content="index, follow" />
<meta name="keywords" content=" "/>
<meta name="description" content=" "/>
<title></title>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	 <link rel="stylesheet" href="css/copie_style_menu.css" type="text/css" />
	 <script type="text/javascript" src="js/copie_functions.js"></script>
<style type="text/css">
<!--
body {
        margin-top: 0px;
}
-->
 
</style></head>
<body bgcolor="#333333">
<table width="1050" border="0" align="center" cellpadding="0" cellspacing="0" style="background: #000; height: 421px; min-height: 421px;">
<tr>
<td colspan="3" style="height: 50px; min-height: 50px; max-height: 50px;"></td>
</tr>
<tr>
<td width="183" valign="top"><div id="menu">
<div class="menu" id="menu1" onclick="afficheMenu(this)"><a href="#"><img src="images/push1.gif" /></a></div><br>
<div id="sousmenu1" style="display:none"><br>
<div class="sousmenu"><a href="#">th&eacute;&acirc;tre</a></div><br>
<div class="sousmenu"><a href="#">enfance et jeunesse</a></div><br>
<div class="sousmenu"><a href="#">po&eacute;sie</a></div><br>
 
<div class="sousmenu"><a href="#">traduction</a></div><br>
<div class="sousmenu"><a href="#">in&eacute;dits</a></div><br>
<div class="sousmenu"><a href="#">autres publications</a></div><br>
</div>
<div class="menu" id="menu2" onclick="afficheMenu(this)"><a href="#"><img src="images/push1.gif" /></a></div><br>
<div id="sousmenu2" style="display:none"><br>
<div class="sousmenu"><a href="#">saison 2010-2011</a></div><br>
<div class="sousmenu"><a href="#">saison 2009-2010</a></div><br>
<div class="sousmenu"><a href="#">archives</a></div><br>
</div>
 
<div class="menu" id="menu3" onclick="afficheMenu(this)"><a href="#"><img src="images/push1.gif" /></a></div><br>
<div id="sousmenu3" style="display:none"><br>
<div class="sousmenu"><a href="#">lacoop</a></div><br>
<div class="sousmenu"><a href="#">projets pour la sc&egrave;ne</a></div><br>
<div class="sousmenu"><a href="#">enseignement/Ateliers</a></div><br>
<div class="sousmenu"><a href="#">radio</a></div><br>
</div>
<div class="menu" id="menu4" onclick="afficheMenu(this)"><a href="#"><img src="images/push1.gif" /></a></div><br>
<div id="sousmenu4" style="display:none"><br>
<div class="sousmenu"><a href="#">&agrave; l'affiche</a></div><br>
 
<div class="sousmenu"><a href="#">nouvelle publication</a></div><br>
<div class="sousmenu"><a href="#">impromptus</a></div><br>
</div>
<div class="menu" id="menu5" onclick="afficheMenu(this)"><a href="#"><img src="images/push1.gif" /></a></div><br>
<div id="sousmenu5" style="display:none"><br>
<div class="sousmenu"><a href="#">presse</a></div><br>
<div class="sousmenu"><a href="#">liens</a></div><br>
<div class="sousmenu"><a href="#">contact</a></div><br>
</div>
</div></td>
<td width="800" valign="top" style="width: 665px; background: #fff;">contenu</td>
 
<td width="17" style="background: #000;">&nbsp;</td>
</tr>
</table>
 
</body>
</html>
Javascript

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
function afficheMenu(obj){
 
	var idMenu     = obj.id;
	var idSousMenu = 'sous' + idMenu;
	var sousMenu   = document.getElementById(idSousMenu);
 
	/*****************************************************/
	/**	on cache tous les sous-menus pour n'afficher    **/
	/** que celui dont le menu correspondant est cliqué **/
	/** où 4 correspond au nombre de sous-menus         **/
	/*****************************************************/
	for(var i = 1; i <= 5; i++){
		if(document.getElementById('sousmenu' + i) && document.getElementById('sousmenu' + i) != sousMenu){
			document.getElementById('sousmenu' + i).style.display = "none";
		}
	}
 
	if(sousMenu){
		//alert(sousMenu.style.display);
		if(sousMenu.style.display == "block"){
			sousMenu.style.display = "none";
		}
		else{
			sousMenu.style.display = "block";
		}
	}
 
}
Pour voir le résultat : http://www.la-grange-sardieres.fr/si...entation2.php#

Sous IE il y a également un problème, lorsque je clique sur un menu pour le dérouler, on attend un clique et l'image est entourée.

Pourriez-vous m'aider s'il vous plait ?

Merci beaucoup et bonne soirée