How can I make asp.net menu of 100% width

Question

I am building an asp.net website where I need a horizontal asp menu to be the full screen width with 10 items each of 10% width.

Please suggest a solution because when I set menu width to 100% and li width to 10 % it doesn't come in full width.

However when I set menu width to 1280(my resolution) and li width to 128 it works fine. The problem with approach is not everyone has the same resolution Html code of asp.net menu:

<div>
            <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" 
                EnableTheming="False" EnableViewState="False" 
                IncludeStyleBlock="False" Orientation="Horizontal" Width="1280px">
                <Items>
                        <asp:MenuItem Text="HOME" Value="ADD CITY" NavigateUrl="~/Content.aspx"></asp:MenuItem>
                        <asp:MenuItem NavigateUrl="~/addcity.aspx" Text="NEW CITY" Value="ADD CITY">
                        </asp:MenuItem>
                        <asp:MenuItem Text="NEW DATA" Value="SUBMIT DATA" NavigateUrl="~/adddata.aspx"></asp:MenuItem>
                        <asp:MenuItem Text="SHOPING" Value="SHOPING">
                        </asp:MenuItem>
                        <asp:MenuItem Text="OFFERS" Value="OFFERS"></asp:MenuItem>
                        <asp:MenuItem Text="BUSINESS" Value="BUSINESS"></asp:MenuItem>
                        <asp:MenuItem Text="CLASSIFIED" Value="CLASSIFIED"></asp:MenuItem>
                        <asp:MenuItem Text="EDUCATION" Value="EDUCATION"></asp:MenuItem>
                        <asp:MenuItem Text="ISSUES" Value="ISSUES"></asp:MenuItem>
                        <asp:MenuItem Text="SERVICES" Value="SERVICES"></asp:MenuItem>
                </Items>
            </asp:Menu>
        </div>

i tried to make it well-formatted. Now please help.

here is my css

    {
    div.menu
    {
        margin:0px 0px 0px 0px;
        padding: 0px 0px 0px 0px;
        min-width:100%;
    }

    div.menu ul
    {
        margin:0px 0px 0px 0px;
        list-style: none;
        margin: 0px;
        padding: 0px;
        min-width:100%;
    }

    div.menu ul li a
    {
        background-color:Black;
        border: 0px Gray solid;
        color: White;
        display:table-cell;
        padding: 10px 10px;
        text-decoration:none;
        margin:0px 0px 0px 0px;

    }
    div.menu li
    {
        text-align:center;
    }

    div.menu ul li a:hover
    {
        background-color: #B5B5B5;
        color: Black;
        text-decoration: none;
    }

    div.menu ul li a:active
    {
        background-color: Gray;
        color: Black;
        text-decoration: none;
    }
    div.menu ul li .selected
    {
        background-color: #646464;
        color: Black;
        text-decoration: none;
    }

    }

Add the HTML output for your menu, and any CSS you've used please - that will help a lot. — dash, Jun 23 '12 at 09:59
my all codes are now unreadable so please suggest the solution using examples. — , Jun 23 '12 at 10:01

score 2 · Accepted Answer · answered Jun 23 '12 at 09:57

2

You can define a Css class like this:

.Menu
{  
  width:100%; 
}

.Menu ul li
{

    width:10%;
}

After that set the following property of menu control to the name of CSS class in aspx.

CssClass="Menu"

answered Jun 23 '12 at 09:57

Ebad Masood

2,389
28
46

thanks for helping but i tried this and its not working for me after using this all menu items shrinks to their original width. – Jun 23 '12 at 10:04

alireza azami · Answer 2 · 2016-06-30T17:06:48.470

I know it's late to answer this question but There may still be someone who wants to know the answer. my solution to this question is simple and works for two level menu:

    ul.level1 {
    width:100% !important;

}
    .level1 li {
        width:10%;
    }
ul.level2 {
    width:100% !important;
}
    .level2 li {
        width:100%;
    }

notice that the !important is used to overrule the in-line CSS that the menu generates

How can I make asp.net menu of 100% width

2 Answers2

Linked