Problème avec ménu déroulant

Bonjour,
j'ai récupéré un code source html sur le net j'essaie de le modifier à ma convenance mais le problème c'est que lorsque je déroule le ménu, il descend avec le corps ou se trouve le texte et je voudrais pouvoir éviter cela mais je ne sais comment procéder?
Voici mon code 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
 
<!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" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Site de l'artiste Dingo la Joie</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jsfiles/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	$("ul.menu_body li:even").addClass("alt");
    $('img.menu_head').click(function () {
	$('ul.menu_body').slideToggle('medium');
    });
	$('ul.menu_body li a').mouseover(function () {
	$(this).animate({ fontSize: "14px", paddingLeft: "20px" }, 50 );
    });
	$('ul.menu_body li a').mouseout(function () {
	$(this).animate({ fontSize: "12px", paddingLeft: "10px" }, 50 );
    });
});
</script>
 
</head>
 
<body>
<div class="container">
<img src="images/navigate.png" width="184" height="32" class="menu_head" />
<ul class="menu_body">
<li><a href="bibliographie.html">Ma bibliographie</a></li>
<li><a href="debuts.html">Mes d&eacute;buts</a></li>
<li><a href="photos.html">Mes photos</a></li>
<li><a href="videos.html">Mes vid&eacute;os</a></li>
<li><a href="fan club.html">Mon fan club</a></li>
<li><a href="contacts.html">Contactez-moi</a></li>
</ul>
</div>
 
<div id="corps">
 
<p>
Michael Joseph Jackson (né le 29 août 1958 à Gary, Indiana) est un chanteur, acteur-compositeur et danseur-chorégraphe américain surnommé « The King of Pop » (en français « Le Roi de la Pop »). Vedette dès son plus jeune âge et icône planétaire
</p>
 
</div>
 
</body>
</html>

Et mon code 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
24
 
@charset "iso-8859-1"";
/* CSS Document */
 
body{background:#534741;font-family:Arial, Helvetica, sans-serif; font-size:12px; width:100%;}
ul, li{margin:0; padding:0; list-style:none;}
 
.menu_head{border:1px solid #998675;}
 
.menu_body {display:none; width:160px;border-right:1px solid #998675;border-bottom:1px solid #998675;border-left:1px solid #998675;}
.menu_body li{background:#493e3b;}
.menu_body li.alt{background:#362f2d;}
.menu_body li a{color:#FFFFFF; text-decoration:none; padding:10px; display:block;}
.menu_body li a:hover{padding:15px 10px; font-weight:bold;}
 
#corps
    {
     margin-left: 200px; 
     margin-right: 20px; 
     padding: 5px; 
	 margin-top: 12px; 
     color: white;
     border: 1px solid black
  }

Merci d'avance pour vos réponses à venir.