Let we see the result first ^^
CODE FOR CSS
<style type="text/css">
body
{
width:100%; margin:0 auto;
overflow:hidden;
color:#333; font-family:Verdana; font-size:9pt;
}
a
{
color:#333; text-decoration:none;
}
#nav
{
width:100%;
background-image:url("images/header.gif");
padding:0px 0px 0px 20px;
background-repeat:repeat-x;
background-position:bottom;
}
#nav .menuitem
{
background-color:Transparent; padding:5px 5px;
}
#nav .menuitemhover
{
background-image:url("images/header-hover.gif");
background-repeat:repeat-x;
background-position:bottom;
border:solid 1px #989898;
}
#nav .dynamicmenu
{
background-color:#f9f9f9;
padding:1px 10px 1px 10px;
border:solid 1px #989898;
}
#nav .dynamicitem
{
background-color:Transparent;
background-repeat:repeat-x;
background-position:bottom;
padding:5px 5px;
}
#nav .dynamicitemhover
{
background-image:url("images/header.gif");
background-repeat:repeat-x;
background-position:bottom;
padding:5px 5px;
border:solid 1px #989898;
}
</style>
CODE FOR ASP.NET
<body>
<form id="form1" runat="server">
<div id="nav">
<asp:Menu ID="Menu1" runat="server" Orientation="Horizontal"
StaticEnableDefaultPopOutImage="False" >
<StaticMenuItemStyle
CssClass="menuitem" />
<DynamicHoverStyle CssClass="dynamicitemhover" />
<DynamicMenuStyle CssClass="dynamicmenu" />
<DynamicMenuItemStyle CssClass="dynamicitem" />
<StaticHoverStyle CssClass="menuitemhover" />
<Items>
<asp:MenuItem Text=" Menu1" Value="Menu1" ImageUrl="~/images/home.gif">
<asp:MenuItem Text="Menu1.1" Value="Menu1.1"></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Text=" Menu2" Value="Menu2"
ImageUrl="~/images/listing.gif">
<asp:MenuItem Text="Menu2.1" Value="Menu2.1"></asp:MenuItem>
<asp:MenuItem Text="Menu2.2" Value="Menu2.2"></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Text=" Menu3" Value="Menu3"
ImageUrl="~/images/content.gif"></asp:MenuItem>
<asp:MenuItem Text=" Menu4" Value="Menu4"
ImageUrl="~/images/role.gif"></asp:MenuItem>
<asp:MenuItem Text=" Menu5" Value="Menu5"
ImageUrl="~/images/link.gif"></asp:MenuItem>
</Items>
</asp:Menu>
</div>
</form>
</body>
No comments:
Post a Comment