Menu déroulant qui ne s'affiche pas correctement

Bonjour,

Cela fait déjà plusieurs semaines presque que je m'arrache la tête à fabriquer un menu correct dont l'affichage est compatible pour tout les navigateurs...
J'ai enfin réussis à trouver et mettre à ma sauce un menu qui fonctionne, il est visible ici:
http://www.pierrefaure71.com/college/testmenu.html

Cependant, quand je l'intègre à ma page voila ce que j'obtiens ( tout navigateur confondus ):
http://pierrefaure71.com/coillege/index.php

Le menu se déroule mais trop bas et rien à faire je vois pas pourquoi il marche bien seul et il bug quand je l'intègre à ma page... je sèche vraiment et c'est assez urgent de régler le problème.

Je fournis le CSS, l'HTML et le JAVA du menu pour que vous me guidiez, et si besoin je fournirai le CSS du site.

Merci beaucoup de votre aide, j'en ai vraiment besoin...!

L'HTML:


<ul id="menuV2">
<li><a href="http://www.pierrefaure71.com/college/index.php">NOTRE ETABLISSEMENT</a><ul class="sub">
<li><a href="http://www.pierrefaure71.com/college/nosclasses.php">NOS CLASSES</a></li>
<li><a href="http://www.pierrefaure71.com/college/notreequipepedago.php">EQUIPE PEDAGO</a></li>
<li><a href="http://www.pierrefaure71.com/college/notreequipeadmin.php">EQUIPE ADMIN</a></li> </ul>
</li>
<li><a href="#">NOTRE PROJET</a>
<ul class="sub">
<li><a href="http://www.pierrefaure71.com/college/projetpedago.php">PEDAGOGIQUE</a> <ul class="sub">
<li><a href="http://www.pierrefaure71.com/college/emploisdutemps.php">EMPLOIS DU TEMPS</a></li>
<li><a href="http://www.pierrefaure71.com/college/evaluations.php">EVALUATIONS</a></li>
<li><a href="http://www.pierrefaure71.com/college/reussiteperso.php">REUSSITE</a></li>
</ul></li>

<li><a href="http://www.pierrefaure71.com/college/projeteducatif.php">EDUCATIF</a>
<ul class="sub">
<li><a href="http://www.pierrefaure71.com/college/eduquerliberte.php">LIBERTE</a></li>
<li><a href="http://www.pierrefaure71.com/college/eduquersavoir.php">SAVOIR</a></li>
<li><a href="http://www.pierrefaure71.com/college/eduquercreativite.php">CREATIVITE</a></li>
</ul></li>


<li><a href="http://www.pierrefaure71.com/college/projetpastoral.php">PASTORAL</a></li>
</ul>
</li>
<li><a href="http://www.pierrefaure71.com/college/nosactualites.php">NOS ACTUALITES</a>
<ul class="sub">
<li><a href="http://www.pierrefaure71.com/college/nosactuculturelles.php">CULTURELLES</a></li>
<li><a href="http://www.pierrefaure71.com/college/nosactusportives.php">SPORTIVES</a></li>
<li><a href="http://www.pierrefaure71.com/college/nosactudiverses.php">DIVERSES</a></li>

</ul>
</li>

</ul>







Le CSS :



#menuV2 li, #menuV2 a {zoom:1;} /* Hacks for IE6, IE7 */
#menuV2, #menuV2 ul
{
width: 200px; /* Main Menu Item widths */
/* [disabled]border: 1px solid #ccc; */
border-top: none;
position: relative;
font-size: 0;
list-style: none;
margin: 0;
padding: 0;
display: block;
background-color: #B94161;
z-index: 1000;
/* [disabled]left: 5px; */
/* [disabled]padding-left: 5px; */
}

/* Top level menu links style
---------------------------------------*/

#menuV2 li
{
/* [disabled]background: #FFF url(bg.gif) repeat-x 0 2px; */
list-style: none;
margin: 0;
padding: 0;
z-index: 1000;
position: relative;
/* [disabled]top: -20px; */
}
#menuV2 li a
{
font: 12px Arial, Helvetica, sans-serif;
/* [disabled]border-top: 1px solid #ccc; */
display: block;
/*overflow: auto; force hasLayout in IE7 */
color: #FFF;
text-decoration: none;
line-height: 26px;
/* [disabled]padding-left: 26px; */
text-align: center;
font-weight: bold;
/* [disabled]z-index: 1000; */
}
#menuV2 ul li a
{
line-height: 26px;
}

#menuV2 li a.arrow:hover
{
/* [disabled]background-image:url(arrowon.gif); */
background-repeat: no-repeat;
background-position: 97% 50%;
background-color: #E05E87;
}

/*Sub level menu items
---------------------------------------*/
#menuV2 li ul
{
position: absolute;
width: 150px; /*Sub Menu Items width */
visibility: hidden;
z-index: 1000;
}

#menuV2 a.arrow
{
background-image:url(arrow.gif);
background-repeat: no-repeat;
background-position: 97% 50%;
}
#menuV2 li:hover, #menuV2 li.onhover
{
background-position:0 -62px;
}
#menuV2 ul li
{
background: #B94161;
background-image: none;
position: relative;
z-index: 1000;
/* [disabled]top: -30px; */
}
#menuV2 ul li:hover, #menuV2 ul li.onhover
{
background: #E05E87;
background-image: none;
}

/* Holly Hack for IE \
* html #menuV2 li
{
float:left;
height: 1%;
}
* html #menuV2 li a
{
height: 1%;
}*/
/* End */






Le JAVA :


var alignWithMainMenu=true;

/* Vertical Menu - Developed by http://www.MenuCool.com/vertical/vertical-menu Retaining this comment is required.*/
function initmenu(){var e=document.getElementById("menuV2"),i=e.offsetHeight,b=e.getElementsByTagName("ul"),g=/msie|MSIE 6/.test(navigator.userAgent);if(g)for(var h=e.getElementsByTagName("li"),a=0,j=h.length;a<j;a++){h[a].onmouseover=function(){this.className="onhover"};h[a].onmouseout=function(){this.className=""}}for(var a=0;a<b.length;a++){var c=b[a].parentNode;c.getElementsByTagName("a")[0].className+=" arrow";b[a].style.left=c.offsetWidth+"px";b[a].style.top=c.offsetTop+"px";if(alignWithMainMenu){var d=getParentOffsetRoot(c.parentNode,0);if(b[a].offsetTop+b[a].offsetHeight+d>i){var f;if(b[a].offsetHeight>i)f=-d;else f=i-b[a].offsetHeight-d;b[a].style.top=f+"px"}}c.onmouseover=function(){if(g)this.className="onhover";var a=this.getElementsByTagName("ul")[0];if(a){a.style.visibility="visible";a.style.display="block"}};c.onmouseout=function(){if(g)this.className="";this.getElementsByTagName("ul")[0].style.visibility="hidden";this.getElementsByTagName("ul")[0].style.display="none"}}for(var a=b.length-1;a>-1;a--)b[a].style.display="none"}function getParentOffsetRoot(a,b){if(a.id=="menuV2")return b;else{b+=a.offsetTop;return getParentOffsetRoot(a.parentNode.parentNode,b)}}if(window.addEventListener)window.addEventListener("load",initmenu,false);else window.attachEvent&&window.attachEvent("onload",initmenu)






Voila,

Merci encore.