Menu déroulant avec images mappées

Bonjours voila j'ai terminer mon design sur photoshop et j'ai dont réaliser un menu déroulant... j'ai chercher comment le réaliser et j'ai trouver le tuto des images mappées... j'ai réussi a mapper mes images avec mapthis, j'ai mes maps... mais la je seche pour réaliser le menu déroulant x_x

Voici ma page html :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
   <head>
       <title>One week in the United Kingdom</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   </head>
   <body>
	  <div id="header">
	     <!-- header dans CSS -->
      </div>
	  <div id="menu">
	     <img src="images/menu.jpg" usemap="#menu" alt="image"/>
		 <img src="images/monday_menu.png" usemap="#monday_menu" alt="image"/>
		 <img src="images/tuesday_menu.png" usemap="#tuesday_menu" alt="image"/>
		 <img src="images/wednesday_menu.png" usemap="#wednesday_menu" alt="image"/>
		 <img src="images/thursday_menu.png" usemap="#thursday_menu" alt="image"/>
		 <img src="images/friday_menu.png" usemap="#friday_menu" alt="image"/>
	  </div>
	  <div id="corps">
	  </div>
      <div id="footer">
      </div>
      <div id="map">
	     <map name="menu" class"map">
            <area shape="rect" coords="0,283,168,313" href="#"/>
	        <area shape="rect" coords="0,253,168,283" href="#"/>
            <area shape="rect" coords="0,204,168,233" href="#"/>
            <area shape="rect" coords="0,175,168,204" href="#"/>
            <area shape="rect" coords="0,145,168,175" href="#"/>
            <area shape="rect" coords="0,116,168,145" href="#"/>
            <area shape="rect" coords="0,89,168,116" href="#"/>
            <area shape="rect" coords="0,60,167,89" href="#"/>
         </map>
         <map name="monday_menu" class="map">
            <area shape="rect" coords="4,0,273,25" href="#"/>
            <area shape="rect" coords="4,25,273,56" href="#"/>
            <area shape="rect" coords="4,56,273,85" href="#"/>
	        <area shape="rect" coords="4,85,274,114" href="#"/>
            <area shape="rect" coords="4,114,273,143" href="#"/>
            <area shape="rect" coords="4,143,274,172" href="#"/>
            <area shape="rect" coords="4,172,273,200" href="#"/>
            <area shape="rect" coords="3,200,274,229" href="#"/>
            <area shape="rect" coords="3,229,272,255" href="#"/>
            <area shape="rect" coords="4,255,272,285" href="#"/>
         </map>
         <map name="tuesday_menu" class="map">
            <area shape="rect" coords="6,1,133,29" href="#"/>
            <area shape="rect" coords="6,29,134,58"  href="#"/>
         </map>
         <map name="wednesday_menu" class="map">
            <area shape="rect" coords="6,2,219,31" href="#"/>
            <area shape="rect" coords="6,31,218,61" href="#"/>
            <area shape="rect" coords="6,61,218,90" href="#"/>
            <area shape="rect" coords="6,90,218,115" href="#"/>
		 </map>
		 <map name="thursday_menu" class="map">
            <area shape="rect" coords="11,4,124,31" href="#"/>
            <area shape="rect" coords="10,31,124,60"  href="#"/>
         </map>
		 <map name="friday_menu" class="map">
            <area shape="rect" coords="6,3,275,31" href="#"/>
            <area shape="rect" coords="6,31,276,59" href="#"/>
            <area shape="rect" coords="5,59,275,89" href="#"/>
            <area shape="rect" coords="4,89,275,117" href="#"/>
		 </map>
      </div>
   </body>

Toute les maps se trouve dans la balise <div id="map">, les map x_menu sont les menu qui doivent s'afficher quand le curseur est sur x dans le menu.png

cad : si le curseur est sur monday sur l'image menu.png monday_menu.png doit s'ouvir... ainsi de suite !

voici mon CSS :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
body
{
   width: 760px;
   margin: auto;
   margin-top: 20px;
   margin-bottom: 20px;    
   background-image: url("images/background.jpg");
   /*ajouts*/
   background-color: black;
   background-position: center;
   background-repeat: repeat-y;
   /*--*/
}
 
#header
{
   width: 908px;
   height: 216px;
   background-image: url("images/header.png");
   background-repeat: no-repeat;  
}
 
/* Menu déroulant */

Un deuxième petit problème... mon arrière plan est bien centrer et tout mais mon header et les autre image sont décaller si je veux les center avec le background... x_x du coup avec le margin auto sa créer un décalage si la fenetre change de taille.

voici les images qui vont avec :
http://filebeam.com/e699b3f36a3ff5dc38711b2951e50c07

Merci d'avance de votre aide