I have a menu running off of a sitemap which one of the SiteMapNode looks like this:

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

I also have a Skin applied to the asp:menu which uses the following css definition:

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

When I run the website and mouseOver the Gear link, the Jokewood font is not applied to those items, how can I apply the css to the Armor and Weapons titles?

I should of mentioned that the font is displayed correctly on all non-nested siteMapNodes.

+2  A: 

you can nest CSS commands by listing them in sequence

siteMapNode siteMapNode { .... css code ... } would be applied to the inner node.

for instance,

#menu ul ul { ... }

would be applied to
<ul> <-- not here
<div id="menu">
<ul> <-- not here
<ul> <---- here

Devin Ceartas
Markdown "fixed" that for you. Should be #menu ul ul {...}
+1  A: 

Firefox's Web Developer ( addon is a good alternative/companion to firebug. It's easier to use for CSS debugging (IMO)

+1  A: 

You should bind styles like this (for both static and dynamic menu items):

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

The skin is applied through a .skin template.

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