OK, curiousity got the better of me, despite it being Sunday. :)
It turns out that this is a well-known issue with IE:
http://www.webreference.com/programming/javascript/form/
It may be fixed for IE7; I don't know; it would be interesting if someone on the forums could test it in IE7 beta2.
Meanwhile, we can work around the issue. Let's try to create/refine a solution together (everyone reading this forum). Here's what I would suggest initially:
In MenuExample.css (or whatever CSS file you are using to adjust the appearance of your menu) add a class like this:
.AspNet-Menu-NoDisplay
{visibility: hidden;}
Then use the following enhanced version of JavaScript\MenuAdapter.js:
var hoverClass = "AspNet-Menu-Hover";
var topmostClass = "AspNet-Menu";
var noDisplayClass = "AspNet-Menu-NoDisplay";
var arrayFormTagNames = new Array("INPUT", "SELECT", "OPTION", "BUTTON", "TEXTAREA");
function ShowHide_FormElements__AspNetMenu(showIt)
{
var iTagName, tagName, iFormElement, formElement;
for (iTagName=0; iTagName<arrayFormTagNames.length; iTagName++)
{
tagName = arrayFormTagNames[iTagName];
var arrayFormElements = document.body.getElementsByTagName(tagName);
for (iFormElement=0; iFormElement<arrayFormElements.length; iFormElement++)
{
formElement = arrayFormElements[iFormElement];
if (showIt)
{
RemoveClass__CssFriendlyAdapters(formElement, noDisplayClass);
}
else
{
AddClass__CssFriendlyAdapters(formElement, noDisplayClass);
}
}
}
}
function Hover__AspNetMenu(element)
{
// AddClassUpward__CssFriendlyAdapters(element.firstChild /* gets the inner SPAN or A */, topmostClass, hoverClass);
AddClass__CssFriendlyAdapters(element, hoverClass);
ShowHide_FormElements__AspNetMenu(false);
}
function Unhover__AspNetMenu(element)
{
// RemoveClassUpward__CssFriendlyAdapters(element.firstChild /* gets the inner SPAN or A */, topmostClass, hoverClass);
RemoveClass__CssFriendlyAdapters(element, hoverClass);
ShowHide_FormElements__AspNetMenu(true);
}
function SetHover__AspNetMenu()
{
var menus = document.getElementsByTagName("ul");
for (var i=0; i<menus.length; i++)
{
if(menus[i].className == topmostClass)
{
var items = menus[i].getElementsByTagName("li");
for (var k=0; k<items.length; k++)
{
items[k].onmouseover = function() { Hover__AspNetMenu(this); }
items[k].onmouseout = function() { Unhover__AspNetMenu(this); }
}
}
}
}
window.onload = SetHover__AspNetMenu;
This should result in form items appearing/disappearing so they don't interfere with the menu. You may decide that this is too distracting. You could, of course, limit which form elements are impacted by tweaking the JavaScript so it doesn't consider all form elements in the body but, instead, some more limited subset of form elements that are causing you grief... though I'm not sure how you might do that without injecting a bunch of very site-specific code into the JavaScript.
What are your thoughts?