asp.net - ASP 菜单在其容器 div 之外呈现

Question

我正准备演示我客户的系统，但到目前为止，我的所有工作都在我的开发和测试环境中进行，而且一切都非常顺利。在演示的新环境中设置系统 - 由于某种我无法解释的原因 - 破坏了菜单。

基本上是演示环境中的菜单，虽然使用与其他菜单完全相同的代码，但菜单不会在其容器内部 呈现。屏幕截图和代码如下:

它应该是什么样子

它看起来如何

我最初是在 Visual Studio 2012 中编写系统的，但由于无法预料的演示限制，我不得不将其全部“移植”回 2010 年。基本上这只是涉及将事件处理程序等复制/粘贴到新的文件。

代码如下:

<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>

还有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;
}

我觉得我可能过于依赖 asp 来处理菜单布局。

我希望我可以提供一个指向在线工作测试用例的链接，但是我可以访问的主机都不支持 asp.net。我所做的是压缩此菜单所在的母版页、内容页(目前还是空的)和样式表以供您注意:

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

我已经用细齿梳理过这个问题，但我无法弄清楚是什么导致菜单出现在它的容器之外。

如有任何帮助，我们将不胜感激。提前致谢!

Answer 1

仍然不知道为什么会这样，但是设置负的上边距可以将菜单放在我需要的位置:

.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;
}