Displaying sub menus on mouse over

See more:

Javascript

Hi All,

I have got a hover menu that is getting displayed on mouse over of every node of a treeview. This is working fine. What i want to do is to display sub menus on mouse over of the menu items.

Following is the code:

In HTML:

<div id="hoverpopup" style="visibility:hidden; position:absolute; top:0; left:0;">
        <table bgcolor="#0000FF">
            <tr><td><font color="#FFFFFF">Option 1</font></td></tr>
            <tr><td bgcolor="#8888FF">Option 2</td></tr>
            <tr><td><font color="#FFFFFF"><a id="Option3" onmouseout="showhide('SubHover',false,'Option3');" onmouseover="showhide('SubHover',true,'Option3');">Option 3</a></font></td></tr>
            <tr><td bgcolor="#8888FF">Option 4</td></tr>
            <tr><td><font color="#FFFFFF">Option 5</font></td></tr>
            <tr><td bgcolor="#8888FF">Option 6</td></tr>
        </table>
    </div>
    <div id="SubHover" style="visibility:hidden; position:absolute; top:0; left:0;">
        <table>
            <tr><td bgcolor="gray">Option 3.1</td></tr>
            <tr><td bgcolor="#ffffff">Option 3.2</td></tr>
            <tr><td bgcolor="gray">Option 3.3</td></tr>
            <tr><td bgcolor="#ffffff">Option 3.4</td></tr>
        </table>
    </div>

In Javascript:

//#############New Code###############
        var menuArray = new Array();
        menuArray[0] = 'hoverpopup';
        //menuArray[1] = 'submenu2';
        var globalObject = '';
        var isActive = false;
        var ourTimer;

        function showhide(obj,onlink,arg)
        {
            targetObject = document.getElementById(obj).style;

            globalObject = targetObject;
            if(onlink)
            {
                clearTimeout(ourTimer);

                for (i=0; i < menuArray.length; i++)
                {
                    var tempObject = document.getElementById(menuArray[i]).style;
                    tempObject.visibility = "hidden";
                }

                targetObject.visibility = 'visible';
                targetObject.position = "absolute";
                targetObject.top = getPosition(event).y;
                targetObject.left = getPosition(event).x;
                isActive = true;
            }
            else
            {
                isActive = false;
                layerTimer();
            }
        }

        function layerTimer()
        {
            ourTimer = setTimeout("hideMenu()",0750);
        }

        function hideMenu()
        {
            if( !isActive )
            {
                globalObject.visibility = 'hidden';
            }
        }

        function layerCheck(flag)
        {
            if(flag)
            {
                isActive = true;
                clearTimeout(ourTimer);
            }
            else
            {
                isActive = false;
                layerTimer();
            }
        }
        window.onload = function()
        {
            for(var i=0;i<menuArray.length;i++)
            {
                var id = menuArray[i];
                var e = document.getElementById(id);
                e.onmouseover = function(e)
                {
                    layerCheck(true);
                }
                e.onmouseout = function(e)
                {
                    layerCheck(false);
                }
            }
        }
        //############################

The problem here is, as soon as i mouse over on option 3, the sub menus appear, but the main menu disappears, because of the Mouseout event probably.

Can somebody tell me, how do i maintain the main menu, while displaying the sub menu on mouseover???

Best Regards,
Snigdharani Behera