如何将 css 应用于二级菜单项？答案

【问题标题】：How do I apply css to second level menu items?如何将 css 应用于二级菜单项？
【发布时间】：2010-09-12 15:23:49
【问题描述】：

我有一个从站点地图运行的菜单，其中一个 SiteMapNode 看起来像这样：

<siteMapNode title="Gear" description="" url="">
  <siteMapNode title="Armor" description="" url="~/Armor.aspx" />
  <siteMapNode title="Weapons" description="" url="~/Weapons.aspx" />
</siteMapNode>

我还为 asp:menu 应用了一个皮肤，它使用以下 css 定义：

.nav-bar {
  z-index: 2;
  margin-top: -5%;
  position: absolute;
  top: 281px;
  font-family: Jokewood;
  font-style: italic;
}

当我运行网站并将鼠标悬停在 Gear 链接上时，Jokewood 字体未应用于这些项目，如何将 css 应用于 Armor 和 Weapons 标题？

更新
我应该提到字体在所有非嵌套的 siteMapNodes 上都能正确显示。

【问题讨论】：

您能否发布为该页面生成的 HTML+CSS（相关部分），以便我们不必猜测？

标签： asp.net css sitemap

【解决方案1】：

您可以通过按顺序列出 CSS 命令来嵌套它们

siteMapNode siteMapNode { .... css code ... } 将应用于内部节点。

例如，

#menu ul ul { ... }

将应用于

【讨论】：

Markdown 为您“修复”了这个问题。应该是#menu ul ul {...}

【解决方案2】：

Firefox 的 Web Developer (https://addons.mozilla.org/en-US/firefox/addon/60) 插件是 firebug 的一个很好的替代品/伴侣。它更容易用于 CSS 调试 (IMO)

【讨论】：

【解决方案3】：

您应该像这样绑定样式（对于静态和动态菜单项）：

<asp:Menu ID="Menu1" runat="server" >
    <StaticMenuStyle CssClass="nav-bar" />
    <DynamicMenuStyle CssClass="nav-bar" />
</asp:Menu>

【讨论】：

【解决方案4】：

皮肤通过 .skin 模板应用。

<asp:Menu runat="server" CssClass="nav-bar" />

【讨论】：