Check there for a preview of my nights work

Anyway, if you check it out in Moz, it works fine. But check it out in IE and hover your mouse over the topnav text (which are links), then when the menu comes up, move your mouse down as if you were going to hover over one of the items. You'll see that the menu will disappear. But if you put your mouse over to the side of the text and do the same, the menu remains (as it supposed to).

If I take out the anchors (meaning, leave only the text), it works fine. IE just hates those anchors for some reason lol.

Anyway, some files you might want to look at if you're willing to help

• global.js - Just some generic functions
• menu.js - The meat and potatoes of the menu functionality
• main.css - The CSS file. Don't think it has anything to do with the CSS though.

The only thing that closes any menus is the closeMenu function which is called on document.onmouseover. The anchors are part of an object which stops event bubbling, so in theory, they shouldn't be closing lol.

And yes, the anchors do matter. DHTML is just a feature to me, the page still has to function without it.

Edit: Took the files off from my server. I've attached them to this post for people who read this later.

I've made a satisfactory fix. Created a browser sniffer to sniff out IE's (not sure if the bug exists in other browsers, have to check it out), then did some IE-only stuff to kill the anchors within init_menu().

    //-----------------
    // Fix IE thing with
    // anchors
    //-----------------
    if(is_ie)
    {
        a_tags = obj_fire.getElementsByTagName("a");

        if(a_tags)
        {
            content = "";
            for(var i = 0; i < a_tags.length; i++)
            {
                content += a_tags[i].innerHTML;
                a_tags[i].removeNode(false);
            }

            obj_fire.innerHTML = content;
        }
    }

It's not only anchors, I believe it's any inline element. This'll work for now, but I'm still searching for a real solution

// Edit
Okay, I've made another more reasonable solution. I just cancel the closing of menus if the menu was opened via onmouseover of a inner item of the menu div. Still don't know why it's doing that, I stop bubbling and proagation with the handleEvent function.

Anyway, here it is.

/*------------------------------------------------------------------------*\
  init_menu
      - Initiate a menu
\*------------------------------------------------------------------------*/
function init_menu(id_fire, noarrow)
{
    obj_fire = getObj(id_fire);

    if(!obj_fire)
        return;

    if(!noarrow)
        document.write('<img src="' + IMG_DIR + '/menu_arrow.gif" alt="" border="" />');


    //-----------------
    // Fix for menu
    // closing
    //-----------------
    if(obj_fire.children)
    {
        for(var i = 0; i < obj_fire.children.length; i++)
        {
            obj_fire.children[i].onmouseover = function() { fire_cancelclose = true; } ;
        }
    }

    //-----------------
    // Enable onmouseover
    // on fire
    //-----------------
    obj_fire.onmouseover = menufire_onmouseover;
}

/*------------------------------------------------------------------------*\
  document_onmouseover
      - Handle the closing of the menus when they leave the menu area
\*------------------------------------------------------------------------*/
function document_onmouseover()
{
    if(fire_cancelclose)
    {
        fire_cancelclose = false;
        return true;
    }

    closeMenu();
    return true;
}

Can you not make the anchors block level?

Originally Posted by 0beron

Can you not make the anchors block level?

Just wanted to ask the same question.

It's a shot in the dark - Chroder will probably post back and give us a really good reason why not!

I tried Only thing that worked is to 'cancel' any closing of the menus when the mouse strays over any child element within the div.