0

首先，我想说我仍然认为这个网站有最好的答案。这一年对我帮助很大。基本上，我到处都看过，但都是空的。

好的，所以我会尽量保持简单：

  1. 我有一个 ASP:Menu 从数据库中检索它的数据。这包括与 id 相关联的父母和孩子。
  2. 然后将其添加到创建菜单项的递归方法中，将子项添加到正确的父项。- 这里还是不错的。完美运行。
  3. 然后它会填充我在网页上插入的 asp:menu 控件。- 这里也很好。
  4. 然后在添加项目之后，asp:menu 会漂亮地显示它，我可能会添加它。所以我在这里也很好。

下一部分是主要问题：

经过 3 天的痛苦之后，我尝试做最简单的事情，但绝对无济于事：显示父母的所有孩子项目（意思是父母的所有孩子）而不将鼠标悬停在父母身上并且不使用 Javascript。ASP.Net 背后的代码只有纯 CSS 和 HTML 以及 C#。

我想要以下内容：

  • 从类似的东西：

    nav > ul > li:hover > div{ display: block; opacity: 1; visibility: visible; }

  • 至

    nav > ul > li > div{ display: block; opacity: 1; visibility: visible; }

上面的示例代码基本上意味着不需要将鼠标悬停在父项上以显示子项。所以，简而言之，我需要为我的 asp:menu 父母和孩子提供类似的东西。我只有1级的孩子。这意味着我的孩子没有孩子。1 父母有多个孩子，就是这样。然后它转到其他父母和孩子身上。

以下是我拥有的数据结构的示例：

  • 公司

    |--- 关于我们

    |--- 服务

    |--- 介绍

    |--- 客户

  • 产品

    |--- 商业

    |--- 住宅

这是我拥有的 asp:menu 的代码：

<asp:Menu ID="uxLiteral1" Orientation="Horizontal" runat="server"
OnMenuItemClick="Bottom_Click" SkipLinkText=""
StaticEnableDefaultPopOutImage="False" IncludeStyleBlock="False"/>

据我了解，这可以通过 CSS 完成，但在这一点上，我会尽我所能。

我很抱歉发了这么长的帖子，并在此先感谢您！！

PS：我已经查看了 StaticDisplayLevels 属性，并没有将它添加到彼此下方。所以这对我不起作用。我愿意使用任何其他控件来完成工作。

编辑：这是我发现 asp:menu 生成的 CSS 代码，其代码应该显示菜单所包含的项目，但目前它似乎不起作用。

.FooterDetails > .Square > #BotMenu1_UpdatePanel1 > #BotMenu1_uxLiteral1 > ul.static { font-weight: bold; }

.FooterDetails > .Square > #BotMenu1_UpdatePanel1 > #BotMenu1_uxLiteral1 > ul.static > li.static > ul.dynamic > li.dynamic > a.dynamic { font-weight: normal; visibility: visible !important; padding-right: 25px; margin-bottom: 3px; }

静态类是第一项，即我的项目的标题和父项。在这种情况下，它将是“公司”和“产品”。

动态班级是静态班级的孩子。

4

1 回答 1

0

好吧，经过一天的努力来解决这个问题，答案似乎很简单。

给 asp:menu 一个新的 css 类，如下所示：

<asp:Menu ID="uxLiteral1" runat="server" CssClass="FooterMenu" Orientation="Horizontal"     IncludeStyleBlock="false" StaticEnableDefaultPopOutImage="False"     OnMenuItemClick="NavigationMenu_MenuItemClick" DisappearAfter="0" />

然后将更改 CSS，以便菜单及其所有项目仅链接到以下 CSS：

div.FooterMenu
{
    align-content: center !important;
}

div.FooterMenu ul
{
    list-style: none;
    display: inline-block !important;
}

    div.FooterMenu ul li
    {
        padding-right: 65px;
        margin-bottom: 3px;
    }

这将为您提供所需的效果，即在没有任何悬停效果的情况下显示每个父项的所有子项。再一次，我觉得自己是真正的 MVP。

于 2014-11-17T13:15:03.360 回答