0

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

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

它应该是什么样子

它应该是什么样子

它看起来如何

它看起来如何

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

我已经用细齿梳子完成了这个，我只是无法弄清楚是什么导致菜单出现在它的容器之外。

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

4

1 回答 1

0

仍然不知道为什么会发生这种情况，但是设置一个负的上边距将菜单放在我需要的位置：

.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;
}
于 2013-09-04T11:34:50.857 回答