Menu déroulant passe en dessous du contenu

Bonjour,

Je suis à la recherche d'une éventuelle solution à un bug pour mon site web qui est en création. Il s'agit du menu déroulant, les sous-menu viennent se glisser en dessous du contenu de la page du dessous ceux deviennt donc invisible.

Je vous ai préparé un exemple concret du bug en image :

Avec le bug : http://image.noelshack.com/fichiers/2014/12/1395169656-sans-titre.png
Sans le bug :http://image.noelshack.com/fichiers/2014/12/1395169661-sans-titre2.png

Mon css :

head
{
width: 100%;
	background: url('http://image.noelshack.com/fichiers/2014/05/1391255132-yazzaeditor.png')
}
body
{
	width: 100%;
	background: url("./public/BG2.png"),url("./public/fuzion-10.png");
	background-color: black;
	background-position: center top;
	background-attachment: scroll;
	background-repeat:no-repeat;
	text-align: center;
	font-family: ;
	}
@charset "iso-8859-1";
/* JS disabled styles */
.no-js nav li:hover ul { display:block; }

/* styles de base nav*/
nav { display:block; text-align:center; margin:0 auto; border:1px solid #222; position:relative; background-color:#333333; font:16px Titillium,Tahoma, Sans-serif; text-align:center; } 
nav ul { padding:0; margin:0; } 
nav li { position:relative; display:inline-block; list-style-type:none; } 
nav ul:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } 
nav li a { display:block; padding:10px 20px; border-left:1px solid #999999; border-right:1px solid #222; color:#eee; text-decoration:none;} 
nav li a:focus { outline:none; text-decoration:underline; } 
nav li:first-child a { border-left:none; } 
nav li.last a { border-right:none; } 
nav a span { display:block; float:right; margin-left:5px; } 
nav ul ul { display:none; width:100%; position:absolute; left:0; background:#333333 }
nav ul ul li { float:none; } 
nav ul ul a { padding:15px 10px; border-left:none; border-right:none; font-size:14px; }
nav ul ul a:hover { background-color:#555; } 


p
{
width: 800px;
font-family: Tahoma, Geneva, Kalimati, sans-serif;
font-size: 16px;
color: #a9a9a9;
display:inline-block;
text-align: left;
position: relative;
top: 300px;
left: -400px;
}

#title
{
width: 100%;
font-family: Titillium,Tahoma, Sans-serif;
font-size: 23px;
color: #BEF8FE;
display:inline-block
text-align: left;
position: relative;
top: 170px;
left: 0px;
}


h1
{
width:800px;
font-family: Titillium, Tahoma, Sans-serif;
font-size: 40px;
color: #932c2c;
display:inline-block;
text-align: left;
position: relative;
top: 160px;
left: 400px;
}

h2
{
width:800px;
font-family: Titillium, Tahoma, Sans-serif;
font-size: 16px;
color: #932c2c;
display:inline-block;
text-align: left;
position: relative;
top: 120px;
left: 400px;
}

#entete1 {width:800px;
font-family: Titillium, Tahoma, Sans-serif;
font-size: 16px;
color: #a9a9a9;
display:inline-block;
text-align: left;
position: relative;
top: 400px;
left: -400px;}

	#eswc {width: 100%; display: inline-block; position: relative; top: 400px; left: 0px;} #Points {width: 100%; display: inline-block; position: relative; top: 50px; left: 150px;} #efr123 {width: 100%; display: inline-block; position: relative; top: 100px; left: 240px;}
 #entete {width: 100%; display: inline-block; position: relative; top: 190px; left: 0px;}
 
 #entete2 {width:800px;
font-family: Titillium, Tahoma, Sans-serif;
font-size: 16px;
color: #a9a9a9;
display:inline-block;
text-align: left;
position: relative;
top: 500px;
left: 0px;}

#footer{
font:16px Titillium,Tahoma, Sans-serif;
text-align: center;
color: #a9a9a9;
position: relative;
top: 1105px;
left: 0px;
height:10px;
}

#footerAbout{
font:21px Titillium,Tahoma, Sans-serif;
text-align: center;
color: #932c2c;
position: relative;
top: 800px;
right: -60px;
height:10px;}

#footerAbouttext{
font:15px Titillium,Tahoma, Sans-serif;
text-align: left;
color: #a9a9a9;
position: relative;
top: 850px;
left: 53px;
display:inline-block;
width:200px;}

#footerNetworktext{
font:15px Titillium,Tahoma, Sans-serif;
text-align: left;
color: #a9a9a9;
position: relative;
top: 790px;
left: 115px;
display:inline-block;
width:200px;}



a.link{color:#a9a9a9; text-decoration:none} a.link:hover { color: #932c2c;}
a.link2{color:#a9a9a9; text-decoration:none} a.link:hover { color: #932c2c;}

Mon html :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
    <head>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="presentation.css" type="text/css" charset="utf-8" />
	<div style="width:100%">
	
        <title>Ligue Française des FPS Console</title>
		
			<link rel="icon" type="image/ico" href="./public/LFFC.ico" />
			
		<div id="entete">
		<img src="" alt="" class="logo"></center
		</div>

    </head>
	
	</div>
<body>
    

 <link rel="stylesheet" href="css/style.css">
<!-- chargement des scripts -->	
<script src="scr/jquery.js"></script>
<script src="scr/modernizr.js"></script>
</head>
<body class="no-js">

<!-- Emplacement du menu -->		
<?php
 include 'Menu.php';
 ?>
 <div id="entete"><img src="public/presentation.png" alt="Présentation" /></div>
	<h1>Ligue Française des FPS Console</h1>
	<div id="entete1"><b><FONT COLOR=#932c2c >La LFFC (Ligue Française des FPS Console) fait partie de la FFJV (Fédération Française de jeux vidéo) qui a pour but de participer au développement de l'eSport. <a href="http://www.ffjv.org/" class="link" title="">www.ffjv.org</a> <br><br><b> Quels sont les objectifs de la LFFC ? </b>?</FONT><b><br><br><br>Les buts de cette Ligue est d'organiser une ligue nationale permettant de réaliser un classement des meilleurs structures et de de les convier à la grande final à Paris.</div>
	 <div id="eswc"><img src="public/ESWC-1.png" alt="ESWC-1" /></div>
	<div id="entete2"><b><FONT COLOR=#932c2c >Comment participer ??</FONT></b><br><br>Pour se faire, il vous faudra une licence, disponible sur le site de la FFJV <a href="http://www.ffjv.org/" class="link" title="">www.ffjv.org</a>
	<br><br>Ces licences sont GRATUITES et permettent d'avoir -20% sur les hotels Kyrias et Campanille pour les déplacements en compétition offline.
	<br><br><br><br><br><FONT COLOR=#932c2c >Comment être le meilleur de cette Ligue ???</FONT>
	<br><br>Le classement qui sera établie en fin de saison sera sous forme de point, distribué lors des différents tournois offline et online. Ces tournois devront d'abord être homologués, par la Fédération.
	<br><br><br><br><br><FONT COLOR=#932c2c >Voici comment seront attribués les points :</font>
	<div id="Points"><img src="public/upload_2014-3-3_21-14-33.png" alt="ESWC-1" /></div>
		 <div id="efr123"><a href="http://esport-francais.fr/portal/"><img src="public/EFR-123.png" alt="http://esport-francais.fr/portal/"/></a></div>
	<br><br><br><br><br><br>Concernant les conditions d'homologations des compétitions, nous vous renvoyons aux précédentes new's ci-dessous :
	<br><br><br><br><a href="http://esport-francais.fr/threads/ffjv-ligue-licence.1636/#post-14340" class="link" title="">[Ligues, licences ...]</a>
	<br><br><a href="http://esport-francais.fr/threads/implication-des-organisateurs-d%C3%A9v%C3%A9nements-des-structures.1657/" class="link" title="">[Implication des organisateurs d'événements et des structures]</a>
	<br><br><br><br><br><br><br><br><FONT COLOR=#932c2c >Pour plus d'information, suivez la LFFC sur twitter : <a href="https://twitter.com/LFFC_" class="link" title="">@LLFC_</a></FONT>
</div>

<?php
 include 'footer.php';
 ?>

</body>
</html>

Merci à celui qui m'aidera !