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...
.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; }
sunscar9536
Member
2 Points
14 Posts
Re: Multiple Menus - Overlay Problem
Jan 06, 2007 05:02 AM|LINK
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...):
"css friendly adapter" menu css IE7 IE6 CSS div css Control Adapters Menu Menu Css CssAdapters DataList DataListAdapter CSS Control Adapters menu IE7 IE6