Superposer deux DIV

Bonjour,

Ma page est composé d'un tableau principale centré sur celle-ci.

Sur la premiere ligne du tableau j'ai le bandeau de mon site ( une image)

Et sur cette image il y a trois zone qui me servent de menu.
Donc je souhaite quand on pointe sur l une des trois zone qu'un menu s affiche en dessous de l image.

J ai essayé plein de choses mais sans reussite.
J ai mon bandeau dans un div et j ai mes 3 div avec mes menus, mais quand je les place dans mon <td> ca me creer un espace blanc en dessous du div du bandeau ( ce qui est logique puisqu il prend la hauteur des div menu)
mais le hic c que j aimerais que les divs menu soit au dessus de l image et pas coller en dessous.
J arrive a le faire mais l autre prob c'est que j utilise absolute et donc si on change la resolution de l ecran mes menus seront pas placé au bon endroit.

j espere etre clair , voici le code pour le moment , si qqun a une idee pour m'aider, une autre solution, merci d avance:

Code:

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
102
103
104
<style type="text/css">
<!--
#Layer1 {
	left:285px;
	top:203px;
	width:93px;
	height:54px;
	z-index:2;
	background-color: #0d9fec;
	visibility: hidden;
}
#Layer2 {
	position:absolute;
	left:472px;
	top:203px;
	width:102px;
	height:59px;
	z-index:3;
	background-color: #0d9fec;
	visibility: hidden;
}
#Layer3 {
	position:absolute;
	left:580px;
	top:203px;
	width:97px;
	height:59px;
	z-index:4;
	background-color: #0d9fec;
	visibility: hidden;
}
#Layer4 {
	left:0px;
	top:-5px;
	width:770px;
	height:156px;
	float:left;
}
#bandeau {position: relative;zoom: 1;
width: 770px; height: 156px;top:50px;}
 
-->
</style>
 
<div id="Layer1" onmouseover="MM_showHideLayers('Layer1','','show')" onmouseout="MM_showHideLayers('Layer1','','hide')" >
      <table width="93" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td width="10">&nbsp;</td>
          <td width="83" class="headerNavigation2"><a href="index.php?cPath=10">Mattia</a></td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td class="headerNavigation2"><a href="index.php?cPath=11">KL</a></td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td class="headerNavigation2"><a href="index.php?cPath=12">New Marine</a></td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td class="headerNavigation2"><a href="index.php?cPath=13">Virus Boat</a></td>
        </tr>
      </table>
    </div>
 
 
    <div id="Layer2" onmouseover="MM_showHideLayers('Layer2','','show')" onmouseout="MM_showHideLayers('Layer2','','hide')">
      <table width="93" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td width="10">&nbsp;</td>
          <td width="83" class="headerNavigation2"><a href="index.php?cPath=32">Accastillage</a></td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td class="headerNavigation2"><a href="index.php?cPath=33">Cordage</a></td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td class="headerNavigation2"><a href="index.php?cPath=34">V&ecirc;tement</a></td>
        </tr>
      </table>
    </div>
<div id="Layer3" onmouseover="MM_showHideLayers('Layer3','','show')" onmouseout="MM_showHideLayers('Layer3','','hide')">
      <table width="93" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td width="10">&nbsp;</td>
          <td width="83" class="headerNavigation2"><a href="index.php?cPath=14">Zieglermayer</a></td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td class="headerNavigation2"><a href="index.php?cPath=15">Topper</a></td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td class="headerNavigation2"><a href="index.php?cPath=12">New Marine</a></td>
        </tr>
      </table>
    </div>
<table border="0" width="770"  height="156" cellspacing="0" cellpadding="0" align="center">
<tr><td height="50">&nbsp;</td></tr>
  <tr class="header">
      <td><div id="bandeau"><div id="Layer4"><img src="images/bandeau.jpg"  usemap="#Map" border="0"></div></div></td>
  </tr>
</table>