asp:Menu in IE8

I've been using IE8 Beta 2 since sometime in August. As soon as I had downloaded it, I raced to my sites to see if there were any issues caused by the new browser's strict adherence to standards. I'm pretty conservative when it comes to my page and control design, so I didn't expect too many issues. Unfortunately, most of our sites rely on the asp:Menu control to provide navigation. The first thing I noticed was that I could no longer see the Dynamic menu items when hovering over the menu. This is a pretty serious problem because that's the main way users navigate around the site. I did some basic googling and searching on the ASP.NET Forums, and there were quite a number of people with the same problem, but there didn't seem to be an obvious solution.

Needless to say, ever since then I've been eagerly anticipating the IE8 release candidate in hopes that this issue would just fix itself. Well, the release candidate just hit yesterday and it turns out the issue with the ASP.NET Menu control wasn't resolved. I'm sure the breakage was the result of a change to make the browser more standards compliant. Of course that's a good thing, but it's still annoying that I will have to fix old code to account for new browser changes.

 As it turns out, the fix is really straight forward. I'd like to thank the original poster and the folks at Microsoft Connect for posting enough information on this post to get me started. When the menu is rendered, a script resource is included on the page that contains a function called PopOut_Show. The function detects and sets the z-index property of the panel containing the dynamic menu items. The problem is the value for the z-index is calculated differently depending only on whether or not the browser is IE, not which version of IE. Thus, the z-index calculations for IE were assuming that the element.currentStyle.zIndex property would return a numeric value, but in IE8, unless the z-index for these elements has been specified (in a stylesheet or somewhere), the return value is "auto".

I had originally toyed around with using script to adjust the z-index values. That involved swapping in a new PopOut_Show function to append additional logic to account the "auto" value. After I took a second look at it, I realized the same thing could be done using only CSS which seemed like a much better solution. It turned out that all that was really needed was to create or modify a CSS class that includes a z-index value of at least 1, then assign the class to the Menu's DynamicMenuStyle property.  The CSS class would look something like this:

.adjustedZIndex {
    z-index: 1;
}

And the resulting Menu looks something like this:

<asp:Menu ID="Menu1" runat="server">
    <DynamicMenuStyle CssClass="adjustedZIndex" />
</asp:Menu>

You may have to set your z-index to be something higher (for example, if your menu was contained in an element that already had a z-index greater than 1), but this worked for me. I hope this is a help to those who have run into the same issue. Good luck with IE8 - My experience so far has been great!

 If you're interested in the script solution, just let me know and I'll post it.