JavaScript change-content-and-scroll menu bug somewhere

Question

This question is a follow-up on a previous question I asked (with a different twist):

I'm uncertain how to aptly describe my question: It's a bug, that just needs debugging.

Here's my jsFiddle: http://jsfiddle.net/Wagtail/b6Juh/18/

I need to be able to scroll over Item A, Item B, and Item C instead of just having disappear entirely when my mouse leaves Item A. Why is this happening anyway?

Here's the JavaScript, HTML, and CSS codes copied over for your convenience:

HTML

<table id="headMenu">
    <tr>
        <td id="head1">Item 1</td>
        <td id="head2">Item 2</td>
        <td id="head3">Item 3</td>
    </tr>
</table>
<table id="subMenu">
    <tr>
        <td>Dynamic Content!</td>
    </tr>
</table>​

CSS Code:

#headMenu{background:rgb(142,180,227);width:90%;height:50px;color:white;font-weight:bold;text-align:center;margin:20px 5%  0px 5%%;vertical-align:middle;}
#subMenu{background:rgb(195,214,155);width:90%;height:50px;color:white;font-weight:bold;text-align:center;margin:1px 5% auto 5%;vertical-align:middle;}
#headMenu td:hover{background:rgb(162,200,240);}
#subMenu td:hover{background:rgb(210,230,170);}​

JavaScript Code:

var a = 500, head1 = document.getElementById('head1'), subMenu = document.getElementById('subMenu'), timeout;

head1.onmouseover = function(displayMenu) {
    subMenu.innerHTML = '<tr><td>Item A</td><td>Item B</td><td>Item C</td></tr>';
    head1.onmouseout = function(getScroll) {
        subMenu.onmouseover = function(breakTimeout) {
            clearTimeout(timeout);
            subMenu.onmouseout = function(endFunction) {
                subMenu.innerHTML = '<tr><td>Dynamic Content!</td></tr>';
            };
        };
        timeout = setTimeout(function() {
            document.getElementById("subMenu").innerHTML = '<tr><td>Dynamic Content!</td></tr>';
        }, a);
    };
};

Thanks in advance to any answers! If you need clarification, I'll be happy to reply.

Answer 1

Your subMenu.onmouseout function is being triggered as the mouse moves from one of the submenu table cells to another. One simple way to fix this is to add another timeout for moving between the cells.

I've updated your jsfiddle example to show what I mean:

http://jsfiddle.net/b6Juh/22/