Unusual Javascript Problem

[Bozebo]

Hi, I am using Javascript to power a dropdown menu on my site (http://www.bozebo.com). It worked fine until I added the opacity tween, which causes it to flicker when you change focus between items in the dropdown. The odd thing is, it seems to be calling the onmouseover event on the individual lis, despite the fact that the event is only applied to the first li. I havn't been able to fix it and am asking for a little help.
Here is the Javascript in question:


function navHover(nav,type,me){
var origNav = nav;
nav = document.getElementById(nav);
if(type == 1){
me.style.background = '#dcdcdc';
nav.style.display = 'block';
navTween(origNav,0);
} else {
me.style.background = 'transparent';
nav.style.display = 'none';
}
}

function navTween(nav,alph){
if(alph >= 0.7){
alph = 0.7;
} else {
alph += 0.1;
setTimeout('navTween(\''+ nav +'\','+ alph +')',25);
}
var useNav = document.getElementById(nav);
useNav.style.opacity = alph;
useNav.style.filter = "alpha(opacity = "+ String(alph*100) +")";
}


and here is the markup for one dropdown list:


<li onmouseover="navHover('tutorials',1,this)"
onmouseout="navHover('tutorials',0,this)">
<a href="tutorials">Tutorials</a>

<ul id="tutorials">
<li><a href="tutorials/php">PHP</a></li>
<li><a href="tutorials/javascript">Javascript</a></li>
<li><a href="tutorials/xhtml">XHTML</a></li>
<li><a href="tutorials/css">CSS</a></li>
<li><a href="tutorials/c">C/C++</a></li>

</ul>
</li>


I am new to this forum as you can see, and it seems better than the other few I posted on a while ago (where my thread gets 500 views and no replies).