passing parameters to onmouseover/out functions

Hi, I really need some help with this code. I’m trying to build a simple dropdown sub menu system, but I’m having troubles getting my code to work. Mainly, I want to pass a variable into a function called by the onmouseover and onmouseout events from an external javascript file. Here’s the code:

var totalDropMenus = 4;
var dropMenuOutTimer;
var navMenu;
var dropMenu;

window.onload = initDropMenus;

function initDropMenus() {
for (i=1; i < totalDropMenus; i++) {
navMenu = document.getElementById(“navMenu” + i);
dropMenu = document.getElementById(“dropMenu” + i);
[COLOR=”Red”]navMenu.onmouseover = showDropMenu(i);//when I pass [I]i[/I] into the function, the function does not work at all.
navMenu.onmouseout = hideDropMenu(i);[/COLOR]
}
}

function showDropMenu(index) {
button = document.getElementById(“navMenu” + index);
menu = document.getElementById(“dropMenu” + index);
menu.style.visibility = “visible”;
xPos = button.offsetLeft;
menu.style.left = xPos + “px”;
}

function hideDropMenu(index) {
menu = document.getElementById(“dropMenu” + index);
menu.style.visibility = “hidden”;
}

Also in #JavaScript _↴