Hello There,
here is small sample. i hope it gives an idea,
<
div id="MyMenu">
<asp:Menu ID="Menu" runat="server" Orientation="Horizontal" >
<Items>
<asp:MenuItem Text="Home" ToolTip="Home" >
<asp:MenuItem Text="Cookies" ToolTip="Cookies">
<asp:MenuItem Text="Chocolate Chip Cookies" NavigateUrl="~/ccc.aspx" ToolTip="Chocolate Chip Cookies" />
<asp:MenuItem Text="OatMeal Rasin Cookies" NavigateUrl="~/ccc.aspx" ToolTip="OatMeal Rasin Cookies" /><asp:MenuItem Text="No Bake Cookies" NavigateUrl="~/ccc.aspx" ToolTip="No Bake Cookies" /></asp:MenuItem>
<asp:MenuItem Text="Chocolates" ToolTip="Chocolates">
<asp:MenuItem Text="Hard Candy" NavigateUrl="~/ccc.aspx" ToolTip="Hard Candy" />
<asp:MenuItem Text="Soft Candy" NavigateUrl="~/ccc.aspx" ToolTip="Soft Candy" />
<asp:MenuItem Text="Sugar Free Candy" NavigateUrl="~/ccc.aspx" ToolTip="Sugar Free Candy" />
</asp:MenuItem>
<asp:MenuItem Text="Ice Cream" ToolTip="Ice Cream">
<asp:MenuItem Text="Hard Serve" NavigateUrl="~/ccc.aspx" ToolTip="Hard Serve" />
<asp:MenuItem Text="Soft Serve" NavigateUrl="~/ccc.aspx" ToolTip="Soft Serve" /></asp:MenuItem> </asp:MenuItem>
</Items>
<StaticMenuItemStyle CssClass="Item" />
<StaticSelectedStyle CssClass="SelectedItem" />
<StaticHoverStyle CssClass="HoverItem" />
<DynamicMenuItemStyle CssClass="Item" />
<DynamicSelectedStyle CssClass="SelectedItem" />
<DynamicHoverStyle CssClass="HoverItem" />
</asp:Menu>
now the CSS involved
<style type="text/css" runat="server"> <!--
#MyMenu
{
/* Lets leave it blank */
}
#MyMenu
.Item
{
/* CSS class for non-selected Menu Item */
background-image: url(../images/coffeecold.jpg); background-repeat: no-repeat;
}
#MyMenu
.SelectedItem, #MyMenu .HoverItem
{
/* CSS class for hovering and selected Menu Item
i am using same image for hover and selected item,
we can use different ones also */
background-image: url(../images/coffeehot.jpg); background-repeat: no-repeat;
}
/* CSS classes for standard Links for #MyMenu DIV */
#MyMenu
a, #MyMenu a:visited
{
background-color: transparent ! important; /* the reason we use !important is to override the images we just set in
item, selected items and hover for the "anchor class like a:visted, a:hover etc" */
display: block;
}
#MyMenu
a:hover, #MyMenu a:active, #MyMenu a:focus
{
background-color: transparent ! important; /* the reason we use !important is to override the images we just set in
item, selected items and hover "anchor class like a:visted, a:hover etc" */
display: block;
}
-->
</
style>
Thanks
Keyboard not found. Please Press < F1 > to RESUME
Please Remember to Mark as Answer for the post(s) that help you.....so it can help others......Thanks