ASP Menu rendering outside of it's container div

Question

I'm preparing to demo my client's system, but all my work thus far has been on my development and test environments and has all gone very smoothly. Setting the system up on a new environment for the demo has - for some reason I can't explain - wrecked the menu.

Basically the menu in the demo environment, while using the exact same code as the other, the menu doesn't render inside of it's container. Screenshots and code to follow:

How it should look

How it does look

I originally wrote the system in Visual Studio 2012, but due to unforeseen limitations with a demo, I had to "port" it all back to 2010. Basically this just involved some copy/paste of the event handlers and such into new files.

Here's the code:

<div class="menu">
    <asp:Menu runat="server" ID="mnuLoggedIn" Orientation="Horizontal" RenderingMode="List">
        <Items>
            <asp:MenuItem Text="Manage Complexes" NavigateUrl="~/Members/Complex.aspx" ToolTip="View, add, edit or delete complexes"></asp:MenuItem>
            <asp:MenuItem Text="Manage Units" NavigateUrl="Units.aspx" ToolTip="View, add, edit or delete units"></asp:MenuItem>
            <asp:MenuItem Text="Manage Subcontractors" NavigateUrl="Subcontractors.aspx" ToolTip="View, add, edit or delete subcontractors"></asp:MenuItem>
            <asp:MenuItem Text="Manage Insurers" NavigateUrl="Insurers.aspx" ToolTip="View, add, edit or delete insurers"></asp:MenuItem>
            <asp:MenuItem Text="Manage Insurance Policies" NavigateUrl="Policies.aspx" ToolTip="View, add, edit or delete insurance policies"></asp:MenuItem>
            <asp:MenuItem Text="Manage Jobs" NavigateUrl="Jobs.aspx" ToolTip="View, add, edit or delete jobs"></asp:MenuItem>
        </Items>
    </asp:Menu>
</div>

And the css...

/* MENU
============================================ */
.menu 
{
    display: block;
    height: 30px;
    clear: both;
    border-radius: 5px 5px 0 0;
    background: #121211;
}
.menu ul li a
{
    margin-left: 20px;
    color: #fff;
    line-height: 30px;
}
.menu ul li a:hover
{
    color: #85bf25;
    border: 0;
}

I feel like maybe I'm relying too much on the asp to handle the menu layout.

I wish I could provide a link to a working test case online, but no hosting that I have access to has support for asp.net. What I have done is to zip up the master page where this menu is, it's content page (which is as yet empty) and the stylesheet for your attention:

http://www.loganyoung.za.net/code/asp-menu-rendering-outside-of-its-container-div.zip

I've run through this with a fine-toothed comb and I just can't figure out what's causing the menu to appear outside of it's container.

Any assistance will be greatly appreciated. Thanks in advance!

Answer 1

Still don't know why this happened, but setting a negative top margin put the menu exactly where I needed it:

.menu 
{
    display: block;
    height: 30px;
    clear: both;
    border-radius: 5px 5px 0 0;
    background: #121211;
}
.menu ul li a
{
    margin-top: -20px;
    margin-left: 20px;
    color: #fff;
    line-height: 30px;
}
.menu ul li a:hover
{
    color: #85bf25;
    border: 0;
}