Styling Asp.Net Menu control with CSS - Example

Hello friends, here is an example to styling asp.net menu control by using a simple css and a background image. Hope it will help you

To create this stylish menu follow the following steps.

1. Create Menu.css file and type the following css code.

.Menu
{  
 
}

.Menu ul
{  
    background:#7795BD;
}

.Menu ul li
{
    background:#7795BD url(menu_bg.gif) repeat-x;
    text-align:center;
    /* set width if needed.*/
    width:200px;
}

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

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

.Menu ul li a:hover
{
    color: White;
}

.Menu ul li a
{
    color: Black;
}

2. add the following image into the web application.

3. place menu control and set the CssClass property as given below

<asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" CssClass="Menu">

        <Items>
            <asp:MenuItem NavigateUrl="#" Text="New Item" Value="New Item">
                <asp:MenuItem NavigateUrl="#" Text="New Item" Value="New Item"></asp:MenuItem>
                <asp:MenuItem NavigateUrl="#" Text="New Item New Item" Value="New Item"></asp:MenuItem>
                <asp:MenuItem NavigateUrl="#" Text="New Item" Value="New Item"></asp:MenuItem>
            </asp:MenuItem>
            <asp:MenuItem NavigateUrl="#" Text="New Item New Item" Value="New Item">
                <asp:MenuItem NavigateUrl="#" Text="New Item" Value="New Item"></asp:MenuItem>
                <asp:MenuItem NavigateUrl="#" Text="New Item" Value="New Item"></asp:MenuItem>
                <asp:MenuItem NavigateUrl="#" Text="New Item" Value="New Item">
                    <asp:MenuItem NavigateUrl="#" Text="New Item" Value="New Item"></asp:MenuItem>
                </asp:MenuItem>
            </asp:MenuItem>
            <asp:MenuItem NavigateUrl="#" Text="New Item" Value="New Item">
                <asp:MenuItem NavigateUrl="#" Text="New Item" Value="New Item"></asp:MenuItem>
            </asp:MenuItem>
            <asp:MenuItem NavigateUrl="#" Text="New Item" Value="New Item">
                <asp:MenuItem NavigateUrl="#" Text="New Item" Value="New Item"></asp:MenuItem>
            </asp:MenuItem>
        </Items>

    </asp:Menu>