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