JS: onMouseOut not functioning as expected

[dgm]

Hey there. I've written a bit of javascript for the website I'm currently developing. Here's where you can see the most current code:

http://173.55.97.56/webdev/pds/

As you can see, I've got a few large buttons in what I call the site "menu" that will eventually link to various parts of the site. I'm trying to script the page so that when you mouse over one of the buttons, the large image at the top will crossfade to another image, associated with the particular button. Then, when you mouse out of the menu area (a div, #menu, in which all of the button images are placed), there should be a crossfade transition back to the original top banner image, via this line of code:

document.getElementById('menu').onmouseout = function () { xfade(0); }

So far I've only programmed xfade triggers for the "About Us" and "Products by Category" buttons, and of course menu.onMouseOut (using somewhat random placeholder images, heh). The buttons work fine, however, what is NOT working is the above line of code. It seems to trigger a fade transitions before the mouse exits the #menu div. If you mouse out of the "Products by Category" button to the right or the "About Us" button to the left but your mouse remains within the menu area, you get a crossfade transition.

If I comment out that line of code, all of the above mentioned transitions stop.

Any ideas as to what exactly is going on would definitely be appreciated!

EDIT: I see what the problem is. The "onMouseOut" event is triggered for all child elements of my div element, and I only want it triggered for the parent div. Now, how to accomplish this?

Peace,
dgm

[dgm]

Original problem was eventually solved. A needlessly complex solution, to be sure.

However, flicking the mouse from top to bottom across the menu sometimes causes the fade transitions to glitch up a little bit, not sure why. If anyone wants to take a look, be my guest. The link I provided should be active for most of the day.