Passer de Windows à Apple

Bonjour,
je viens de faire un projet de site, que j'ai placé sur mon site (qui est hébergé ok).
je travaille avec windows xp pro... lorsque je visite mon site en local (easy php F7 web local)ou sur mon site distant, tout est ok
j'arrive chez mon client et veut lui faire voir le site sur son PC, c'est un "appel" et c'est la cata! les menus et sous menu déroulants ne s'ouvrent pas, même pas de message d'erreur, au passage de la souris , la couleur ne change pas, et rien ne se passe

j'ai appliqué le code javascript:

<script type="text/javascript">
/*
Created by: Travis Beckham :: http://travisbeckham.com | http://travisbeckham.com/
version date: 06/02/03 :: If want to use this code, feel free to do so,
but please leave this message intact. (Travis Beckham)
*/
// Node Functions
if(!window.Node){
var Node = {ELEMENT_NODE : 1, TEXT_NODE : 3};
}
function checkNode(node, filter){
return (filter == null || node.nodeType == Node[filter] || node.nodeName.toUpperCase() == filter.toUpperCase());
}
function getChildren(node, filter){
var result = new Array();
var children = node.childNodes;
for(var i = 0; i < children.length; i++){
if(checkNode(children[i], filter)) result[result.length] = children[i];
}
return result;
}
function getChildrenByElement(node){
return getChildren(node, "ELEMENT_NODE");
}
function getFirstChild(node, filter){
var child;
var children = node.childNodes;
for(var i = 0; i < children.length; i++){
child = children[i];
if(checkNode(child, filter)) return child;
}
return null;
}
function getFirstChildByText(node){
return getFirstChild(node, "TEXT_NODE");
}
function getNextSibling(node, filter){
for(var sibling = node.nextSibling; sibling != null; sibling = sibling.nextSibling){
if(checkNode(sibling, filter)) return sibling;
}
return null;
}
function getNextSiblingByElement(node){
return getNextSibling(node, "ELEMENT_NODE");
}

// Menu Functions & Properties
var activeMenu = null;

function showMenu() {
if(activeMenu){
activeMenu.className = "";
getNextSiblingByElement(activeMenu).style.display = "none";
}
if(this == activeMenu){
activeMenu = null;
}
else {
this.className = "active";
getNextSiblingByElement(this).style.display = "block";
activeMenu = this;
}
return false;
}
function initMenu(){
var menus, menu, text, a, i;
menus = getChildrenByElement(document.getElementById("menu"));
for(i = 0; i < menus.length; i++){
menu = menus[i];
text = getFirstChildByText(menu);
a = document.createElement("a");
menu.replaceChild(a, text);
a.appendChild(text);
a.href = "#";
a.onclick = showMenu;
a.onfocus = function(){this.blur()};
}
}
if(document.createElement) window.onload = initMenu;
</script>

le code html:

<div class="menu">
<ul id="menu">
<li><a href="accueil.php">Accueil</a></li>
<li>services
<ol><li><a href="#">titre1</a></li>
<li><a href="#">titre2</a></li>
<li><a href="#">titre3</a></li>
</ol>
</li>
<li>articles
<ol><li><a href="#">article1</a></li>
<li><a href="#">article2</a></li>
<li><a href="#">article3</a></li>
</ol>
</li>
<li><a href="contact.php">contact</a></li>

<li><a href="photos.php">photos</a></li>
</ul>
</div>

et le code css:

.menu
{
float:left;
width:20%;
margin-top:45px;
}
ul#menu li
{

padding : 0 2.01em; /* Pour espacer les boutons entre eux */
/* ligne de separatides éléments de la liste*/
}
ul#menu
{
width : 20%;
height : 50px;
margin : 0em 0 0 0;
background-color :#c9c9c9;
list-style-type : circle;
color : yellow;
text-decoration : none;
font : 2.0em "arial";
border : 1px yellow;
}
ul#menu a:hover /*couleur texte au survol de la souris*/
{
color:yellow;
}
ul#menu ol /*en suppimant on change la couleur et la taille des textes*/
{
display: none;
text-align: left;
list-style-type: none;
margin: 0;
padding:10px;
}
ul#menu li, /*attributs des éléments des listes*/
ul#menu a
{
font-family: arial, sans-serif;
font-size: 20px;
color: blue;
padding-left: 25px;
}


merci de m'aider,car là j'avais l'air d'un con... et si vous le pensez, dites le moi!!!
merci à tous bon weekend