Well, this has been an ongoing issue that's really baffled me for months.  Basically since I put up the dropdown menubar.  I've gone thru multiple scripts and etc. thinking maybe my script was broken... Well anyways today I seem to have an "Aha!" moment where I finally figured it out.  It was of course a minor oversight on my part.

All I needed to do was add

z-index:-1

to the pagebody and pagebody-inner sections in my CSS.  

So changed from:

#pagebody
{
position: relative;
width: 100%;
}
/* page body */
#pagebody-inner
{
position: relative;
width: auto;
}

To:

#pagebody
{
position: relative;
width: 100%;
z-index:-1;
}
/* page body */
#pagebody-inner
{
position: relative;
width: auto;
z-index:-1;
}

And so it seems it was a CSS issue in that my webpages are in sectioned, I needed to give the sections overlapped by the dropdowns a z-index of "-1" as IE 6/7 has the quirk of giving other page elements graphical priority over menu drop downs.  Of course, that quirk only shows up in IE 6/7.  Every other web browser has that corrected.  Another reason why I don't like to use IE, all the alternated coding I have to do for it to make my website compatible for IE users.

Update!!  (Nevermind everything I just said...)

Okay, after all that turns out it finally works and looks okay under IE 6/7, but it only gives a blank screen where main body usually is for every other non IE 6/7 browser.  Yet strangely, all the content is still there as I see the mouse turn to the hand when rolling over where I remember the links are, just that's its all white/blank.  So with the above method, looks like I can only get it to work on IE 6/7 that way...

Well, after a full day of messing with things and trying stuff out, it appears that I've finally made a solution.  Over 12 hours that is too and fixing the menubar flyover to work on IE and non-IE is all I've done today! 

My web pages are cut into sections so I can just edit piece by piece when necessary rather than having to do the whole thing each time.  The flyout wouldn't show up right in IE 6/7 as it was crossing over my pagebody section, so... I just moved up the pagebody tags (<div id="pagebody"> and <div id="pagebody-inner" class="pkg"> for me) to start above the menubar and now it works in both IE 6/7 and non-IE browsers.  Because of the change, I did need to adjust one  element by inserting it inside a table cell to give it the correct background color that was supposed to be in the background, but with the tag change is now in the body.

Also with IE 6/7 troubleshooting, noticed two other separate issues that showed up - again of course only in IE 6/7.  I had some screwy tags on one page referencing jpg's in my temp folders on my desktop.  I don't even know how those got there.  And then, I found out that all the pages in the Features section were using the wrong main CSS file.  With changes, somehow that got mixed up and I had 2 CSS's with the same filename.  I didn't even know that was possible!  Of course IE 6/7 was using the alternate CSS that I didn't know about; the non-IE 6/7 browsers using the correct CSS.  So with that issue fixed, now all the fonts and other style elements appear how I intended them to in IE 6/7.