How can I make asp.net menu of 100% width
<p>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.</p>

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

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

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

<p>i tried to make it well-formatted. Now please help.</p>

<p>here is my css</p>

<pre><code>    {
    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;
    }

    }
</code></pre>
