ASP：菜单子项保持可见

Question

首先，我想说的是，我仍然认为该站点具有最佳答案。 全年对我有很大帮助。 基本上，我到处都看过，但空虚了。

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

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

下一部分是主要问题：

经过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需要一些类似的东西：菜单父母和孩子。 我只有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; }

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

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

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。