onMouseOut and Mozilla Firefox

[Vormav]

Hey. I'm having a problem with using onMouseOut commands in Firefox. Here's the code snippet I'm looking at:

							<div style="position:absolute;" id="portfolio-menu" onMouseOut="document.getElementById('portfolio-menu').style.visibility='hidden';document.getElementById('portfolio-button').style.visibility='visible';">
								<table cellpadding="0" cellspacing="0">
								<tr><td id="button-out" onMouseOver="this.id='button-over';" onMouseOut="this.id='button-out';">portfolio</td></tr>
								<tr><td id="button-out" onMouseOver="this.id='button-over';" onMouseOut="this.id='button-out';">3D</td></tr>
								<tr><td id="button-out" onMouseOver="this.id='button-over';" onMouseOut="this.id='button-out';">2D</td></tr>
								<tr><td id="button-out" onMouseOver="this.id='button-over';" onMouseOut="this.id='button-out';">video</td></tr>
								</table>
							</div>

							<table cellpadding="0" cellspacing="0" style="position:relative;" id="portfolio-button" onMouseOver="document.getElementById('portfolio-button').style.visibility='hidden';document.getElementById('portfolio-menu').style.visibility='visible';">
								<tr><td id="button-out">portfolio</td></tr>
							</table>

This is basically supposed to be a simple drop-down menu: When the mouse button goes over the table upon the bottom, wihch would be a simple button reading "portfolio", that table disappears, and a 4-piece menu appears. That much of it works just fine.
The problem I'm having though is with the mouseout command on the 4-piece table. I set the table for the menu within a div tag (though I've also tried doing this different ways) and put an onMouseOut option on the div tag so that when you move the mouse outside of the tag, the visibility changes and the original single menu item is there. BUT, what really happens is that when passing between the varying TD tags in the table, Firefox somehow interprets this as you taking the mouse out of the DIV tag - which makes absolutely no sense to me. It makes it so that as you're moving down the menu table, the table disappears before you get to another menu item.
So far, I've tried changing IDs of elements inside the div tag to see if the onmouseout attribute wasn't just carrying over into those elements based on their ID, but it's a no go.

Any ideas?

 

[chessbot]

If you aren't dead-set on tables, check out A List Apart's Suckerfish Dropdowns.

--Chessbot

There is a level of Hell reserved for probability theorists in which every monkey that types on a typewriter produces a Shakesperean sonnet.

 

[deanhiller]

I am having a similar problem. I have two cells, top and bottom, and I am trying to slide out the keypad of a graphic device in the bottom cell(bottom cell is empty and then iterates over graphics). But when I move down to the keypad(ie. between cells), it thinks I moved out of the table and rolls back up the keypad. Any way around this?