CSS Styles for Menu Control in Asp.Net

CSS Styles for Menu Controls

.Menu
{
  font-family:Cambria;

}

.Menu ul
{
    background-color:Gray;
    color:White;
}

.Menu ul li
{
   
    background:Gray url(menu_bg.gif) repeat-x;
    text-align:center;
    width:150px;
    border:1px solid #648ABD;
    font-family:Cambria;
}

.Menu ul li a
{
    color: White;
    padding: 4px 2px 4px;
    padding-left:8px !important;
    border:1px solid #648ABD;
    border-bottom: 0;
    font-family:Cambria;

}

.Menu ul li a:hover
{
    background-image: none;
    font-family:Cambria;
}

.Menu ul li a:hover
{
    background-color: Maroon;
    color: White;
    border-radius:5px;
   font-family:Cambria;
}

.Menu ul li a
{
    color: White;
    font-family:Cambria;
    font-size:12px;
}

Example for Menu Control Codding:-

 <asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" CssClass="Menu" Font-Names="Verdana"
                        Width="980px">
                        <Items>
                            <asp:MenuItem Text="Customer">
                                <asp:MenuItem Text="Add New Customer" Enabled="true"></asp:MenuItem>
                                <asp:MenuItem Text="Update Customer" Enabled="true"></asp:MenuItem>
                                <asp:MenuItem Text="Delete Customer" Enabled="true"></asp:MenuItem>
                                <asp:MenuItem Text="View Customer" Enabled="true"></asp:MenuItem>
                                <asp:MenuItem Text="Search Customer" Enabled="true"></asp:MenuItem>
                            </asp:MenuItem>
                            <asp:MenuItem Text="Beneficiary">
                                <asp:MenuItem Text="Add Benificiary" Enabled="true"></asp:MenuItem>
                                <asp:MenuItem Text="Update Benificiary" Enabled="true"></asp:MenuItem>
                                <asp:MenuItem Text="Delete Benificiary" Enabled="true"></asp:MenuItem>
                                <asp:MenuItem Text="View Benificiary" Enabled="true"></asp:MenuItem>
                            </asp:MenuItem>
                            <asp:MenuItem Text="Agent">
                                <asp:MenuItem Text="Add Agent" Enabled="true"></asp:MenuItem>
                                <asp:MenuItem Text="Update Agent" Enabled="true"></asp:MenuItem>
                                <asp:MenuItem Text="Delete Agent" Enabled="true"></asp:MenuItem>
                                <asp:MenuItem Text="View Agent" Enabled="true"></asp:MenuItem>
                            </asp:MenuItem>
                            <asp:MenuItem Text="Reports">
                                <asp:MenuItem Text="Daily"></asp:MenuItem>
                                <asp:MenuItem Text="Weekly"></asp:MenuItem>
                                <asp:MenuItem Text="Monthly"></asp:MenuItem>
                                <asp:MenuItem Text="Date Ranges"></asp:MenuItem>
                            </asp:MenuItem>
                            <asp:MenuItem Text="Accounts">
                                <asp:MenuItem Text="Contact us"></asp:MenuItem>
                            </asp:MenuItem>
                            <asp:MenuItem Text="Help">
                                <asp:MenuItem Text="About Us" Enabled="true"></asp:MenuItem>
                            </asp:MenuItem>
                        </Items>
                    </asp:Menu>


Output:-