I did some experimentation and want to discuss what I found. First, I had to rework the sample you posted above because I didn't have the XML files that that markup referred to. No worries, I just whipped up some static menu items. Here's what I ended up with:
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>ASP.NET 2.0 CSS Friendly Control Adapters 1.0</title>
<link runat="server" rel="stylesheet" href="~/CSS/Import.css" type="text/css" id="AdaptersInvariantImportCSS" />
<!--[if lt IE 7]>
<link runat="server" rel="stylesheet" href="~/CSS/BrowserSpecific/IEMenu6.css" type="text/css" id="IEMenu6CSS" />
<![endif]-->
<style type="text/css">
<!--
.PrettyMenu .AspNet-Menu-Vertical
{
top: 0em;
left: 0em;
z-index: 300;
}
.PrettyMenu ul
{
background:#7795BD;
}
/* Top tier */
.PrettyMenu .AspNet-Menu-Vertical ul.AspNet-Menu
{
width: 15em;
}
.PrettyMenu ul.AspNet-Menu ul
{
width: 10.5em;
left: 9.2em;
top: 0em;
border: solid 1px black;
}
.PrettyMenu ul.AspNet-Menu ul ul
{
width: 11.5em;
left: 10.4em;
}
.PrettyMenu ul.AspNet-Menu li
{
background-color: White;
border: 0px;
}
.PrettyMenu ul.AspNet-Menu li a,
.PrettyMenu ul.AspNet-Menu li span
{
background-color: White;
border: 0px;
padding: 2px;
}
.PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Leaf a,
.PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Leaf span
{
background-image: none;
}
.PrettyMenu ul.AspNet-Menu li:hover,
.PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover
{
background-color: white;
}
.PrettyMenu ul.AspNet-Menu li:hover a,
.PrettyMenu ul.AspNet-Menu li:hover span,
.PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover a,
.PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover span,
.PrettyMenu ul.AspNet-Menu li:hover li:hover a,
.PrettyMenu ul.AspNet-Menu li:hover li:hover span,
.PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover a,
.PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover span,
.PrettyMenu ul.AspNet-Menu li:hover li:hover ul a:hover,
.PrettyMenu ul.AspNet-Menu li:hover li:hover ul span.Asp-Menu-Hover,
.PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover ul a:hover,
.PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover ul span.Asp-Menu-Hover
{
background-color: #d8d8d8;
color: black;
}
.PrettyMenu ul.AspNet-Menu li:hover ul a,
.PrettyMenu ul.AspNet-Menu li:hover ul span,
.PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover ul a,
.PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover ul span,
.PrettyMenu ul.AspNet-Menu li:hover li:hover ul a,
.PrettyMenu ul.AspNet-Menu li:hover li:hover ul span,
.PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover ul a,
.PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover ul span
{
background-color: White;
color: black;
}
.PrettyMenu ul.AspNet-Menu li a:hover,
.PrettyMenu ul.AspNet-Menu li span.Asp-Menu-Hover
{
background-color: White;
color: black;
}
.PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Leaf a:hover
{
background-image: none;
}
-->
</style>
</head>
<body>
<form id="form1" runat="server">
<div style="float: left; clear: right; z-index: 500; border: solid 1px red;">
<asp:Menu ID="Menu1" runat="server" cssselectorclass="PrettyMenu">
<Items>
<asp:MenuItem Text="Fruits">
<asp:MenuItem Text="Apple" />
<asp:MenuItem Text="Banana" />
<asp:MenuItem Text="Orange" />
<asp:MenuItem Text="Watermellon" />
</asp:MenuItem>
</Items>
</asp:Menu>
</div>
<div style="float: left; clear: right; z-index: 1; margin-left: 15px; border: solid 1px green;">
<asp:Menu ID="Menu2" runat="server" cssselectorclass="PrettyMenu">
<Items>
<asp:MenuItem Text="More links">
<asp:MenuItem Text="My first link" />
<asp:MenuItem Text="And now the second one" />
<asp:MenuItem Text="We are up to number three" />
<asp:MenuItem Text="Finally there is the fourth" />
</asp:MenuItem>
</Items>
</asp:Menu>
</div>
</form>
</body>
</html>
In Visual Studio 2005 SP1 I created a new web site based on the ASP.NET CSS Friendly Web Site template created when I installe the CSS Friendly adapter kit's VSI (http://www.asp.net/cssadapters). I used the markup shown immediately above in place of the markup originally present in my new web site's Default.aspx file.
When I then run this Default.aspx file from VS I found that the left-most menu's submenu was partially hidden beneath the top tier of the right-most menu. This seems comparable to the problem reported originally in this posting. That's good because it means we have a reproducible case that we can all run.
The problem is a manifestation of a know bug/problem/misunderstanding or different interpretation. I want to avoid politics here by getting fuzzy on whether or not this is actually a bug in IE. In any event it is described on the web in lots of places if you know what to search for. Here's one example: http://therealcrisp.xs4all.nl/ie7beta/css_zindex.html.
The solution can be pretty simple if you know (and can tolerate) it... put position:relative on the containing <div> tags, too.
In other words, in the markup shown immediately above, you would need to add position:relative in the inline "style" attribute seen on the two <div> tags. My testing shows that that fixes the problem. Do you see likewise? Can this "fix" be applied in your situation, too?
Russ Helfand
Groovybits.com