Unobtrusive javascript - display:none/block problem

[Chroniclemaster1]

I'm learning unobtrusive javascript and would like to refine my code. This chunk of code is what I've built so far. Since it's unobtrusive code it's obviously in my .js file. It runs a drop down menu from a navbutton on my custom website navbar. The button on the navbar AND the drop down menu it triggers are both simply CSS styled divs with links on them. I can provide the XHTML code, but don't think it's germaine for this problem. Here's the unobtrusive javascript

//Turns SiteWideMenu01 On
function SiteWideMenu01On() {
    document.getElementById("SiteWideMenu01").style.display="block";
}

//Turns SiteWideMenu01 Off
function SiteWideMenu01Off() {
    document.getElementById("SiteWideMenu01").style.display="none";
}

//Trigger On functions when SiteWide menu div is moused over
document.getElementById("SiteWideButton01").onmouseover=SiteWideMenu01On; 
document.getElementById("SiteWideMenu01").onmouseover=SiteWideMenu01On; 

//Trigger Off functions when SiteWide menu div is moused out
document.getElementById("SiteWideButton01").onmouseout=SiteWideMenu01Off; 
document.getElementById("SiteWideMenu01").onmouseout=SiteWideMenu01Off;

Here's the problem. I have FIVE navbar buttons... and TWO navbars for a total of TEN buttons. X( So I have to have this code replicated 10 times to drive each menu. Like I said, it works, but all my friends laugh at me. All the code jockeys kick virtual sand in my face at the virtual beach. Now I think I've got a more elegant solution to change the display, and it even works, *almost*. This let's me locate the id of the appropriate menu and turn it on or off.

function findMenuID(e) {
// Opt out of browsers that don't support getElementById (or have it turned off)
if (!document.getElementById) return;

// Grab the XHTML id of the div triggered
if (!e) var e = window.event;

    var item = (e.target) ? e.target.id : e.srcElement.id;
    var itemSuffix = item.substring(item.length-2,item.length);

    // Create the ID of the Menu
    var myMenu = "SiteWideMenu" + itemSuffix;
    return myMenu;
}

function ButtonOn(e) {
    var myMenu = findMenuID(e);
    document.getElementById(myMenu).style.display="block";
}

function ButtonOff(e) {
    var myMenu = findMenuID(e);
    document.getElementById(myMenu).style.display="none";
}

//Trigger On functions when menu div is moused over
document.getElementById("button01").onmouseover=ButtonOn;
document.getElementById("menu01").onmouseover=ButtonOn;

//Trigger Off functions when menu div is moused out
document.getElementById("button01").onmouseout=ButtonOff;
document.getElementById("menu01").onmouseout=ButtonOff;

I tested everything out and it works fine if there is text on the menu. However if there is a link on the div (the whole point of my nav menu), when you mouseover the link it triggers the Off function and the menu disappears -- at least in FF, in IE it just throws an error. I think I pissed off my DOM but that hasn't helped me fix it.