html - ASP :Menu children stays visible

Question

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

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

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

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

经过痛苦的 3 天后，我尝试做最简单的事情，但完全无济于事:显示 parent 的所有 child 元素(意思是 parent 的 child 的 ALL)< strong>WITHOUT 悬停在 parent AND 上而不使用 Javascript。只有纯 CSS 和 HTML 以及 C# 用于 ASP.Net 背后的代码。

我想要如下内容:

• 来自类似:

  nav > ul > li:hover > div{
显示: block ；
不透明度:1；
visibility :可见；
}

• 致

  nav > ul > li > div{
显示: block ；
不透明度:1；
visibility :可见；
}

上面的示例代码基本上意味着无需将鼠标悬停 到父项上即可显示子项。所以，简而言之，我的 asp:menu parent 和 child 需要类似的东西。我只有 1 个级别的 child 。这意味着我的 child 没有 child 。 1 个 parent 有多个 child ，仅此而已。然后交给其他 parent 和 child 。

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

• 公司

  |--- 关于我们

  |--- 服务

  |--- 介绍

  |--- 客户

• 产品

  |--- 商业

  |--- 住宅

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

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

据我所知，这可以用 CSS 来完成，但在这一点上，我会尽我所能。

我为这篇冗长的帖子道歉，并在此先感谢您!

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

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

.FooterDetails > .Square > #BotMenu1_UpdatePanel1 > #BotMenu1_uxLiteral1 > ul.static
{
字体粗细:粗体；
}

.FooterDetails > .Square > #BotMenu1_UpdatePanel1 > #BotMenu1_uxLiteral1 > ul.static > li.static > ul.dynamic > li.dynamic > a.dynamic
{
字体粗细:正常；
可见性:可见!重要；
填充右:25px；
底部边距:3px；
}

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

动态类(class)是 children 的静态类(class)之家。

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。