onMouseOut fires unexpectedly

I have a top-level menu where each item is a table cell containing text.
I use onMouseOver and onMouseOut in each cell to trigger functions that switch the background colour and swap the second level menu items in another div when the cursor is rolled in and rolled out of each cell.

As the cursor moves into the cell, onMouseOver fires as expected. Then as the cursor moves over the text within the cell, onMouseOut fires even though we're still inside the same cell. Obviously I only want onMouseOut to be triggered when the cursor leaves the cell. Apparently it may be something to do with "event bubbling" but I can't find any examples on how to fix the problem. I urgently need a fix, time for reading up the theory later.

What I also can't explain is that even though the onMouseOut function is prematurely triggered, the cell background colour is not switched - that works perfectly as intended.

Code snippets (I have simplified it and replaced the 2nd level menu swapping with alert() for testing):

<SCRIPT LANGUAGE="JavaScript">
function rollIn(menu1item) {
  document.getElementById(menu1item).style.background = "#FFFF99";
  alert("Rolled in!");
}

function rollOut(menu1item) {
  document.getElementById(menu1item).style.background = "#DDDDDD";
  alert("Rolled out!");
}
</SCRIPT>


<TABLE BORDER="0" CELLSPACING="1" CELLPADDING="0" BGCOLOR="#000000"> <TR> <TD ID="welcome" BGCOLOR="#DDDDDD" ALIGN="CENTER"
onMouseOver="rollIn('welcome')" onMouseOut="rollOut('welcome')"
onClick="location.href='welcome.htm';"
STYLE="cursor:pointer;"><B>WELCOME</B></TD>
<TD ID="products" BGCOLOR="#DDDDDD" ALIGN="CENTER"
onMouseOver="rollIn('products')" onMouseOut="rollOut('products')"
onClick="location.href='products.htm';"
STYLE="cursor:pointer;"><B>PRODUCTS</B></TD>

...etc.

</TR>
</TABLE>

Any suggestions or ideas graciously accepted! :)

Mike.