Trying to figure out these menu controls

[amyw_ftdna]

Have two different controls for the Header and navigation depending on whether you are logged in or not.
When you are not logged in, there is less available in the navigation and it shrinks down and does not span across the entire page, which is what I want. I have tried applying a width to just about everything to try to make it do it, unsuccessfully!

Please help!

Code
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false"
StaticDisplayLevels="1" IncludeStyleBlock="false" Orientation="Horizontal" Width="940px" >

<Items>
<asp:MenuItem NavigateUrl="/Default.aspx" Text="Home" />
<asp:MenuItem NavigateUrl="/about.aspx" Text="About" />
<asp:MenuItem NavigateUrl="/Resources.aspx" Text="Resources" >
<asp:MenuItem NavigateUrl="/resources.aspx" Text="Haplo Tree" />
<asp:MenuItem NavigateUrl="/resources.aspx" Text="Research Paper" />
</asp:MenuItem>
<asp:MenuItem NavigateUrl="/contributors.aspx" Text="Contributors" />
<asp:MenuItem NavigateUrl="/account/login.aspx" Text="LOGIN" Value="1"/>
</Items>
</asp:Menu>

end code

CSS


Page.Response.ContentType = "text/css";


Main.Add("#486901");
Main.Add("#618c03");
Main.Add("#74a609");
Main.Add("#a8bf75");


Accent.Add("#023b58");
Accent.Add("#016698");
Accent.Add("#0185c7");

Common.Add("#000000");
Common.Add("#363636");
Common.Add("#333333");
Common.Add("#ffffff");


div.menu
{
margin: 0px;
padding: 0px 0px 4px 1px;
<%--width: 940px;--%>
height: 40px;
}
div.menu ul
{
list-style: none;
margin: 0px;
padding: 0px;
<%--display: block;--%>
<%--width: 940px;--%>
}
div.menu ul li
{
border: none;
}
div.menu ul.static
{
<%--display: block;--%>
<%--width: 940px;--%>
}
div.menu ul.static li.static a.static, div.menu ul.static li.static a.static:visited
{

background-image: url(../img/navBG.png);
background-repeat: repeat-x;
background-color: <%= Accent[0]%>;
border-right: 1px solid <%= Accent[0]%>;
color:<%= Common[3]%>;
font-size: 14px;
display: block;
padding: 8px 33px 0px 32px;
text-decoration: none;
white-space: nowrap;
height: 40px;
}
div.menu ul.static li.static a.static:hover
{
background-color: <%= Main[2]%>;
color: <%= Common[2]%>;
text-decoration: none;
}
div.menu ul.static li.static a.static:active
{
background-color: <%= Main[3]%>;
color: <%= Common[3]%>;
text-decoration: none;
border: none;
}
div.menu ul.dynamic li.dynamic a.dynamic, div.menu ul.dynamic li.dynamic a.dynamic:visited
{
background-image: none;
background-color: <%= Accent[0]%>;
color:<%= Common[3]%>;
font-size: 14px;
display: block;
padding: 8px 4px 0px 4px;
text-decoration: none;
white-space: nowrap;
height: 20px;
width: 121px;

}
div.menu ul.dynamic li.dynamic a.dynamic:hover
{
color: <%= Main[2]%>;
text-decoration: none;
}
div.menu ul.dynamic li.dynamic a.dynamic:active
{
background-color: <%= Accent[0]%>;
color: <%= Common[3]%>;
text-decoration: none;
border: none;
}
div.menu ul.dynamic li.dynamic:last a.dynamic, div.menu ul.dynamic li.dynamic:last a.dynamic:visited
{

background-image: url(../img/footBG.png);
background-repeat: repeat-x;
background-color: <%= Accent[0]%>;
}
end CSS