Hide/show listbox on table click/mouseout

I have an html table with two rows, one cell per row.  The top row contains text representing a selection.  When the user clicks the table I want a listbox to appear in the row below the first.  The listbox is set to height=0 so it's invisible at first.  When the top row is clicked a javascript function fires to change the listbox height=100 to make it visible.  When the user moves the mouse off the table I want the listbox to become invisible again by calling another javascript function to make the height=0 again.  In order to keep the listbox from pushing items around when it's height is set to 100 I have it's position set to absolute.  I'm expecting the onmouseout event to handle the entire table (both rows) but it's firing as soon as I move the mouse from the top row.  It almost seems like the bottom row containing the listbox is not part of the table.  Why?  I've attached a file with the table and two functions.
Who is Participating?
Bane83Connect With a Mentor Commented:
This is because the table and table row are separate objects.

Here's what's happening:

You move the mouse to the first cell, you've now entered the table, left the table, and entered the cell.  How did you leave the table?  It's because even though the cell is part of the table, it's a separate region so once you enter it, the tables onmouseout event will be fired.

But I have good news for you I think... You seem to be trying to recreate something that already exists in a free to use toolkit.

Have a look at this:
bozworthyAuthor Commented:
This is great. I downloaded, installed, and implemented the toolkit.  One question left:  the hovermenu control works when the target control is an asp table cell but it won't recognize an HTML table cell.  Is there a way to fix this or is that just the way it works?
Unfortunately it requires an ASP.NET control.  I believe it was meant for gridview and the like, but I don't see a problem with using asp:table rather than table if it saves you the work from implementing the hover menu.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.