The following is a 2-level asp:Menu control (ASP.NET 2.0) I'm using as a popup nav menu.
<asp:Menu ID="menu1" runat="server" Orientation="vertical" Visible="true"
StaticDisplayLevels="1" StaticSubMenuIndent="0"
Style="visibility:hidden; position:absolute; left:12px; z-index:10001;">
<DynamicMenuItemStyle CssClass="menu_item" />
<DynamicSelectedStyle CssClass="menu_item" />
<StaticMenuItemStyle CssClass="menu_item" />
<StaticSelectedStyle CssClass="menu_item" />
<StaticHoverStyle CssClass="menu_hover" />
<DynamicHoverStyle CssClass="menu_hover" />
</asp:Menu>
I add and remove items from the menu as follows:
menu1.Items.Add(New MenuItem("TopItem", "", "", "Top.aspx"))
Dim mWithSub As New MenuItem("TopItem2", "", "", "Top2.aspx")
mWithSub.ChildItems.Add(Ne
w MenuItem("Sub", "", "", "Sub.aspx"))
menu1.Items.Add(mWithSub)
All is working, except for some of the styling. 1) I'd like to get rid of the little ">"s that indicate there is a sub-menu. I'd rather just have the sub-menus display when the user hovers over the parent item. 2) For the life of me I can't get the hyperlinks to style using CSS, they keep defaulting to plain/default anchors (blue text, underlined, and then magenta'ed on hover). I'd like them to display using the CSS colors below, and no underline. And finally, 3) Despite z-index values *way* above anything else on the page, the sub-menu items keep displaying underneath other controls.
The CSS I'm using is as follows:
.menu_item { display:block; text-decoration:none; text-align:center;
z-index:10001; color:#008394; border:1px solid #682c00;
background:#e2f7fa; font: 12px Verdana; width:160px; }
.menu_hover { color:#fff; background:#008394; z-index:10001; }
Thanks for any help-
Start Free Trial