ASP.NET Menu force single line and not wrap

Question

I've scanned the Internet and oddly, no solutions have worked so far.

I have the below menu:

Site.Master ASP.NET:

<div class="menuBackground">
    <div id="MenuDiv" style="visibility: hidden">
        <asp:Menu ID="SiteMenu" CssClass="menu" IncludeStyleBlock="false" runat="server"
            DataSourceID="NedTreasurySiteMapDataSource" Orientation="Horizontal" OnMenuItemDataBound="SiteMenu_MenuItemDataBound"
            ClientIDMode="Static">
            <StaticItemTemplate>
                <div>
                    <%# Eval("Text") %>
                </div>
            </StaticItemTemplate>
            <DynamicItemTemplate>
                <div>
                    <%# Eval("Text") %></div>
            </DynamicItemTemplate>
        </asp:Menu>
    </div>
</div>

With this CSS:

div.menu
{

}

div.menu ul
{
    list-style: none;
    margin: 0px;
    padding: 0px;
    width: auto;
    z-index: 1000;
}

div.menu ul li a, div.menu ul li a:visited
{
    display: block;
    line-height: 1.35em;
    padding: 4px 20px;
    text-decoration: none;
    white-space: nowrap;
    z-index: 1000;
}

div.menu ul li a:hover
{
    text-decoration: none;
    z-index: 1000;
}

div.menu ul li a:active
{
    text-decoration: none;
    z-index: 1000;
}

The issue: When the browser is resized to a much smaller size, the menu wraps, when I want it not to. I want it to behave as if the contents were cropped, like an overflow: hidden;, remain in a single line, like display: inline and act as a block, retaining the current look.

Good:

Bad:

I was pretty sure that changing the display: block; to display: inline-block; would work, but did not. Using display: inline; puts them in a single line, but messes up their size, since it no longer behaves as a block.

Also, I've tried adding

div.menu ul li
{
    display: inline-block !important;
    white-space: nowrap !important;
}

Which also did not do the trick.

Any ideas guys and girl? TIA.

Answer 1

If you place a fixed width on the menudiv it should solve your issues.

Thanks

Nicholas

Answer 2

Fix the width on menudiv, try that.