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.
samplecode.txt
LVL 1
bozworthyAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Bane83Commented:
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:
http://www.asp.net/AJAX/AjaxControlToolkit/Samples/HoverMenu/HoverMenu.aspx
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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?
0
Bane83Commented:
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.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.