Multiple Menus - Overlay Problem

I apologize if this has already been addressed (and solved).

I've read through most of the posts concerning overlay and z-index problems and still can not find a solution to this problem. I have two menus (side by side) and when the second tier is displayed, it goes under the second menu beside it. I'm including a screenshot that shows what's happening.

What I've tried so far: Changing the Z index on nearly every CSS property for the menu, Adding lower and higher z-index values to the DIV container for the menus and the <asp: menu> tag itself...

Any information or help will be appreciated

Re: Multiple Menus - Overlay Problem

Hmmm.... I'm starting to wonder if there is a solution to this problem. I've continued to try different methods with no luck.

Anyone have any idea?

Re: Multiple Menus - Overlay Problem

Is there any way you could boil down your case to something that you could post here on this thread? I want to help and I'm pretty sure this is solvable by adjusting the z-indices but coaching you through that without being able to refer to specific tags and CSS rules is going to be hard. If you can't post the markup and CSS to a postable form then try to sketch out a basic DOM that represents the various container tags, menus, etc.

If you want, give this a quick try. Isolate your two main containers, the boxes on the left and right. Put a z-index on both. Make the one on the left higher than the right but make sure they BOTH have z-indices explicitly set. Be careful to impact <div> tags that are siblings. This is absolutely critical. When you find the <div> for the box on the left then find the <div> for the rightmost box but make certain (absolutely certain) that these are siblings in the DOM. Only then can you set the z-index on both such that they impact each other properly in IE.

Re: Multiple Menus - Overlay Problem

Russ,

Thanks for replying... I was about to loose all hope. I've created a quick test page using the same CSS for the menus (which is a modified version of the PrettyMenu that comes with the adapters...) The test page I created contains only <divs> and I've explicitly set a "z-index" value for each. This still doesn't seem to work..I also tried wrapping the 2 divs with 1 div, but got the same result. I'll post the code for each below. Is it by design the second tier is below the top tier? Even having only one menu, you have to bump the "left" value up so that it doesn't go under the top tier. I can post a SS of this if it would make that question a little more clear...

Code from new test page:

<form id="form1" runat="server">
    <div style="float:left; clear:right; z-index: 500">
    <asp:menu id="Menu1" runat="server" DataSourceID="xmlMenu" cssselectorclass="PrettyMenu">
             <DataBindings>
                <asp:MenuItemBinding DataMember="siteMapNode"
                  NavigateUrlField="url" TextField="title" ToolTipField="description"
                  ValueField="title"  />
              </DataBindings>
        </asp:menu><asp:XmlDataSource id="xmlMenu" runat="server" XPath="/*/*" DataFile="~/Links/Menu1.xml"></asp:XmlDataSource>
    </div>
    <div style="float:left; clear:right; z-index: 1; margin-left: 15px;">
        <asp:menu id="Menu2" runat="server" DataSourceID="xmlMenu" cssselectorclass="PrettyMenu">
             <DataBindings>
                <asp:MenuItemBinding DataMember="siteMapNode"
                  NavigateUrlField="url" TextField="title" ToolTipField="description"
                  ValueField="title"  />
              </DataBindings>
        </asp:menu><asp:XmlDataSource id="xmlMenu2" runat="server" XPath="/*/*" DataFile="~/Links/Menu1.xml"></asp:XmlDataSource>
    </div>
    </form>

CSS for Menus (modified version of PrettyMenu - I've removed all comments so the post wouldn't be so long...):

.foo {}
.PrettyMenu .AspNet-Menu-Vertical
{
    position:relative;
    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;
}

Re: Multiple Menus - Overlay Problem

A little new development....

After playing with the Z-Index values, I finally got it to work within FireFox, but still no luck in IE. Does anyone know a fix or workaround for this?

The environment in which this is going to be used will be IE only....

Thanks

Re: Multiple Menus - Overlay Problem

I have tried every single z-index value I know of on every thing that even accepts a z-index value and still can't figure this one out... From what I've read z-index values and IE are very tricky.

I tested the exact same layout using the traditional ASP.NET menus and it works fine in both IE and Firefox...

Does ANYONE know what I can do to get around this problem? I would really appreciate some help.

Thanks...

Re: Multiple Menus - Overlay Problem

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" />

.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?

Re: Multiple Menus - Overlay Problem

Russ,

Thanks for the quick reply... For some reason I had my doubts, but it worked... =) thanks so much for the help.

I didn't know the "position: relative;" would be required for each DIV block.

I do have one more question and this may better as a new post, but is there any option to add a custom icon for a bullet next to each item on the second tier?

Thanks again for your time and help...

Re: Multiple Menus - Overlay Problem

Regarding your last question... can you add a custom icon next to each menu item in the second tier? This has been explored in similar postings like http://forums.asp.net/thread/1448602.aspx.

The basic idea will be to set up each menu item to have a unique ImageUrl value. The menu adapter is already smart enough to render an <img> tag if the ImageUrl is set for the menu item.

Clear as mud?

Re: Multiple Menus - Overlay Problem

Russ,

I followed that post and got it working with this code...

If e.Item.Text.StartsWith("image_") Then
            e.Item.Text = e.Item.Text.Remove(0, 6)
            e.Item.ImageUrl = "~/Images/" + e.Item.Text.Replace(" ", "") + ".gif"
        End If

This method works best if I want to add a custom icon, but I'm wanting to add the same "bullet.gif" to every menu item... Is there an easier or better method of accomplishing this?

Thanks...

Re: Multiple Menus - Overlay Problem

If the image isn't changing from one menu item to another, you might consider if you can use that bullet.gif as a background image for the anchor (a tag) or list item (li tag) of the menu.

This is technique that is used by the CSS Friendly adapter kit's menu sample page, http://www.asp.net/cssadapters/menu.aspx. Take a look at that sample page's style sheet, http://www.asp.net/CSSAdapters/srcviewer.aspx?inspect=%2fcssadapters%2fapp_themes%2fbasic%2fmenuexample.css&notree=true. Notice especially lines 54 or 68. The former is used to set the background of the list item. The latter sets the background on the anchor. Bullets are typically set up like line 68 where you set the no-repeat value for the background-position property in CSS. In these samples, the "bullet" is actually used to indicate whether or not there are submenu items. In your case, it sounds like you'd use the bullet as a decoration only. I suppose you'd want to place it to the left of the text of the menu item, so the rule would use "left" not "right" (as the sample currently does).

If none of this works for you, I'd probably stick with the solution (above) that you developed. Remember that the image itself will be cached by the browser so having the extra IMG tags for it within the <li> won't cause latency problems (i.e., slowness due to crossing again and again betwee the client and server). On the other hand, if all of hte IMG tags end up pointing at the same image it really is better to handle this will CSS simply to reduce bulk in your markup.

Good luck.

Re: Multiple Menus - Overlay Problem

Setting the bground property worked perfect! Thanks....

Now if there was a solution for this one.... http://forums.asp.net/thread/1428996.aspx =) This seems to be a bit harded to fix.

Thanks for all your help.