ASP 菜单在其容器 div 之外呈现答案

【问题标题】：ASP Menu rendering outside of it's container divASP 菜单在其容器 div 之外呈现
【发布时间】：2013-09-04 19:34:50
【问题描述】：

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

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

应该是什么样子

它的外观

我最初在 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

我用一把细齿梳子梳理了一遍，但我就是不知道是什么原因导致菜单出现在它的容器之外。

任何帮助将不胜感激。提前致谢！

【问题讨论】：

好吧，既然您显然在这里没有什么建设性的贡献，为什么还要费心发表评论呢？
好吧，正如您所说，代码有效，这告诉我问题出在环境上，所以这会有所帮助...现在我可以从故障排除中删除我的代码，这会有所帮助。

标签： asp.net css aspmenu-control

【解决方案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;
}

【讨论】：