ASP:菜单子项保持可见

Question

首先，我想说的是，我仍然认为这个网站有最好的答案。这一年帮助了我很多。基本上，我到处找过，但结果是空的。

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

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

下一部分是主要问题是什么：

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

我想要如下的东西：

• 从这样：

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

• 自

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

上面的示例代码基本上意味着不需要将鼠标悬停在父项上即可显示子项。所以，简而言之，我需要为我的asp：menu父母和孩子提供类似的东西。我只有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; }

静态类是第一项，即我的项的 Header 和父项。在这种情况下，它将是"公司"和"产品"。

动态类是静态类所承载的子类。

Answer 1

经过一天的努力，答案似乎很简单。

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