CSS を第 2 レベルのメニュー項目に適用するにはどうすればよいですか?

StackOverflow https://stackoverflow.com/questions/125612

  •  02-07-2019
  •  | 
  •  

質問

SiteMapNode の 1 つが次のようになっているサイトマップから実行されるメニューがあります。 

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

また、次の CSS 定義を使用する asp:menu にスキンを適用しています。

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

Web サイトを実行して Gear リンクにマウスオーバーすると、Jokewood フォントがそれらの項目に適用されません。Armor と Weapons のタイトルに CSS を適用するにはどうすればよいですか?

アップデート
ネストされていないすべての siteMapNode でフォントが正しく表示されることは言及しておきます。

役に立ちましたか？

解決

次のようにスタイルをバインドする必要があります (静的メニュー項目と動的メニュー項目の両方)。

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

他のヒント

CSS コマンドを順番にリストすることでネストできます。

siteMapNode siteMapNode { ....CSSコード ...} は内部ノードに適用されます。

例えば、

#メニュー ウル ウル { ...}

に適用されるだろう
<ul> <-- ここにはありません
<リ>
</li>
</ul>
<div id="メニュー">
<ul> <-- ここにはありません
<ul> <---- ここ

Firefoxの ウェブ開発者 （https://addons.mozilla.org/en-US/firefox/addon/60) アドオンは、firebug の優れた代替/コンパニオンです。その CSSのデバッグに使いやすい (IMO)

スキンは .skin テンプレートを通じて適用されます。

<asp:Menu runat="server" CssClass="nav-bar" />
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top