How do I apply css to second level menu items?

Question

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" />
</siteMapNode>

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?

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

Answer 1

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
<li>
</li>
</ul>
<div id="menu">
<ul> <-- not here
<ul> <---- here

Answer 2

Firefox's Web Developer (https://addons.mozilla.org/en-US/firefox/addon/60) addon is a good alternative/companion to firebug. It's easier to use for CSS debugging (IMO)

Answer 3

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" />
</asp:Menu>

Answer 4

The skin is applied through a .skin template.

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