Problème avec du Javascript sur un site

Bonsoir,

J'ai actuellement un problème avec un code Javascript sur un site hébergé sur Free.fr. Quand je teste le code ailleurs, ça marche et dès que je le mets en ligne; plus rien ne fonctionne. Le Script est un menu vertical déroulant, trouvé sur ce cite :

https://www.alsacreations.com/tuto/lire/602-Creer-un-menu-accordeon-avec-jQuery.html

Je ne comprends pas où est l'erreur; faut dire que je ne comprends pas grand chose au Javascript, même si je débute xD Le site doit être terminé très rapidement, mais j'arrive pas à stabiliser le menu du coup =/

Si quelqu'un pouvait m'aider à voir où est le problème - voir à le résoudre xD - ce serait super =)

Merci ;)

Mon code : (je précise que le jquery.js dans le code est ceci ; http://sd-2.archive-host.com/membres/up/190331098933529247/JQuery.js )

<!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">
<head>
<title>Les Prédators de Beauvais</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

<link rel="stylesheet" media="screen" type="text/css" title="code" href="site.css" />

<script type="text/javascript" src="jquery.js"></script>     
 
<script type="text/javascript"> 
<!-- 
$(document).ready( function () { 
    // On cache les sous-menus : 
    $(".navigation ul.subMenu").hide(); 
    // On sélectionne tous les items de liste portant la classe "toggleSubMenu" 
    // et on remplace l'élément span qu'ils contiennent par un lien : 
    $(".navigation li.toggleSubMenu span").each( function () { 
        // On stocke le contenu du span : 
        var TexteSpan = $(this).text(); 
        $(this).replaceWith('<a href="" title="Afficher le sous-menu">' + TexteSpan + '<\/a>') ; 
    } ) ; 
 
    // On modifie l'évènement "click" sur les liens dans les items de liste 
    // qui portent la classe "toggleSubMenu" : 
    $(".navigation li.toggleSubMenu > a").click( function () { 
        // Si le sous-menu était déjà ouvert, on le referme : 
        if ($(this).next("ul.subMenu:visible").length != 0) { 
            $(this).next("ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") }); 
        } 
        // Si le sous-menu est caché, on ferme les autres et on l'affiche : 
        else { 
            $(this).next("ul.subMenu").slideDown("normal", function () { $(this).parent().addClass("open") }); 
        } 
        // On empêche le navigateur de suivre le lien : 
        return false; 
    }); 
} ) ; 
// --> 
 
</script>
</head>

<body>

<table width="900" align="center" class="table" cellspacing="0" cellpadding="0" border="0">
    <tr>
        <td width="900px" colspan="2">
		<div class="banniere"></div>
		</td>
    </tr>
	
    <tr>
        <td width="200px" align="left" valign="top" style="border-right: 1px solid #695072;"><br>
		<div class="titres_menu" align="left">Navigation</div>
			<ul class="navigation"> 
				<li><a href="accueil.htm" target="frame">Accueil du site</a></li>
				
				<li><a href="vide.htm" target="frame">Informations</a>
					<ul class="subMenu"> 
					<li><a href="vide.htm" target="frame">Le club</a></li> 
					<li><a href="vide.htm" target="frame">Règles du football américain</a></li> 
					</ul> 
				</li> 

				<li class="toggleSubMenu"><span>Equipe Sénior</span> 
					<ul class="subMenu"> 
					<li><a href="vide.htm" target="frame">Roster</a></li> 
					<li><a href="vide.htm" target="frame">Calendrier & Résultats</a></li> 
					<li><a href="vide.htm" target="frame">Classement</a></li> 
					</ul> 
				</li> 
				
				<li class="toggleSubMenu"><span>Equipe Junior</span> 
					<ul class="subMenu"> 
					<li><a href="vide.htm" target="frame">Roster</a></li> 
					<li><a href="vide.htm" target="frame">Calendrier & Résultats</a></li> 
					<li><a href="vide.htm" target="frame">Classement</a></li> 
					</ul> 
				</li> 
				
				<li><a href="vide.htm" target="frame">Médias</a>
					<ul class="subMenu"> 
					<li><a href="vide.htm" target="frame">Photos</a></li> 
					<li><a href="vide.htm" target="frame">Vidéos</a></li> 
					</ul> 
				</li> 
				
				<li><a href="vide.htm" target="frame">Partenaires</a> 
				</li> 
			</ul>
		</td>
		
        <td width="700px" align="left" valign="top"><br>
		<div class="titres_menu" align="left">Informations</div>
		<iframe src="accueil.htm" name="frame" frameborder="0" width="700" height="400" id="frame">
		</td>
    </tr>
</table>

</body>
</html>