Menu déroulant gênant

Bonjour,

Je viens solliciter votre aide parce que je galère depuis quelques jours sur un menu déroulant.
En fait le texte qui doit être le principale contenu de ma page est en dessous du menu déroulant. Ce qui est forcément très gênant.. J'ai essayer de lire pas mal de tuto d'alsacréation ou essayer google est mon ami mais la je vous avoue que je désespère un peu.

Ce qui me gène n'est pas le javascript récupérer sur le net pour que IE puisse faire dérouler le menu mais plutôt pourquoi mon menu chevauche le contenu de ma page.
J'ai essayer plusieurs changement sur la position:relative ou absolute mais c'est carrément le chantier pour replacer le menu suite à sa...

Je vous glisse ici le code :

<script type="text/javascript"> 
 sfHover = function() { 
 var sfEls = document.getElementById("menu").getElementsByTagName("LI"); 
 for (var i=0; i<sfEls.length; i++) { 
  sfEls[i].onmouseover=function() { 
   this.className+="sfhover"; 
  } 
  sfEls[i].onmouseout=function() { 
   this.className=this.className.replace(new RegExp("sfhover\\b"), ""); 
  } 
 } 
 } 
 if (window.attachEvent) window.attachEvent("onload", sfHover); 
</script>  

<style type="text/css"> 

#menu 
{ 
 width: 644px; 
 list-style-type: none; 
 font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;  
 font-size:12px; 
 border: 0; 
 position:absolute; 
 margin:10 -10 0 -20; 
} 
#menu li 
{ 
  float: left; 
  margin: 0; 
  padding: 0; 
  border: 0; 
  width:95px; 
  text-align:center; 
} 
#menu .sousMenu 
{ 
  list-style-type: none; 
  margin: 0; 
  padding: 0; 
  border: 0; 
  display:none; 
  height:18px; 
} 
#menu li ul
{ 
  margin: 0; 
  padding: 0; 
  border: 0; 
  width: 95px; 
} 
#menu li a:link, #menu li a:visited 
{ 
  display: block; 
  height: auto; 
  _height:1%; 
  color: #FFF; 
  background: #333333; 
  margin: 0; 
  padding: 4px 8px; 
  border-right: 1px solid #fff; 
  text-decoration: none; 
} 
#menu .sousMenu li a:link, 
#menu .sousMenu li a:visited 
{ 
  display: block; 
  color: #FFF; 
  margin: 0; 
  border: 0; 
  text-decoration: none; 
} 
#menu .sousMenu li a:hover 
{ 
 background: #2580a2; 
 opacity:0.7; 
 filter : alpha(opacity=70); 
} 
#menu li a:hover 
{ 
 background: #2580a2;  
 opacity:0.7; 
 filter : alpha(opacity=70); 
} 
#menu li:hover > .sousMenu { display: block; } 
#menu li.sfhover .sousMenu { display: block; } 

</style> 
<ul id="menu"> 
 <li><a href="#">Le Club</a> 
  <ul class="sousMenu"> 
   <li ><a href="club.php">Prsentation</a></li> 
   <li><a href="simulateurs.php">Simulateurs</a></li> 
   <li><a href="#">Putting-green</a></li> 
   <li><a href="#">Le practice</a></li> 
  </ul> 
 </li>  
 <li><a href="bar-brasserie.php">Restaurant</a> 
  <ul class="sousMenu"> 
   <li><a href="#">Restaurant</a></li> 
   <li><a href="#">Nos formules</a></li> 
   <li><a href="#">Le bar</a></li> 
  </ul> 
 </li> 
 <li><a href="enseignement.php">Enseignement</a> 
  <ul class="sousMenu"> 
   <li><a href="#">Leon individuelle</a></li> 
   <li><a href="#">Initiation dcouverte</a></li> 
   <li><a href="#">Diagnostic vido</a></li> 
   <li><a href="#">Carte verte</a></li> 
  </ul> 
 </li> 
 <li><a href="materiel.php">Matriel</a> 
  <ul class="sousMenu"> 
   <li><a href="#">Pro-Shop</a></li> 
   <li><a href="#">Matriel sur-mesure</a></li> 
   <li><a href="#">Entretien</a></li> 
   <li><a href="#">Rparation</a></li> 
  </ul> 
 </li> 
 <li><a href="entreprises.php">Le sminaire</a> 
  <ul class="sousMenu"> 
   <li><a href="#">Demande de devis</a></li> 
  </ul> 
 </li> 
 <li><a href="evenement.php">Evenementiel</a> 
  <ul class="sousMenu"> 
   <li><a href="soiree.php">Soire prive</a></li> 
   <li><a href="#">Convention</a></li> 
   <li><a href="#">Soire comit d'entreprise</a></li> 
  </ul> 
 </li> 
</ul> 

Je vous remercie d'avance pour votre aide.