I'm using a CSSFriendly asp:Menu control with a sitemap file for the data source.  It's a typical horizontal menu with two levels.  I would like to style each submenu individually.  For example, how can I make the background of the first submenu one color and the second submenu's background another color and so on?

 I am looking at custom attributes in the sitemap file, DynamicItemTemplate, StaticItemTemplate and more.  Just can't wrap my head around it.

I would like to keep the CSSFriendly adapter but it's not a requirement.

If you're using the adapters then you'll be using CSS to style the menu. Have a look at the menu.css file that comes with the adapter sample project - it's very well commented and explains what each rule is, so this should make it easier to track down the places you need. It's also worth using Firefox and the Firbug extension, which has a great CSS explorer; you can inspect the document live and see which CSS rules get applied.

Hi, yes, I'm using CSS to style the menu and have looked at the sample adapter project and I don't think there's an example of what I would like to see.  Basically, I want to be able to apply a custom css class to certain items in the menu.  Thanks for the firebug tip.

Ah, different styles for different menu items. You can hack this via the MenuItemDataBound event; not the most elegant solution, but it works:

public void MyMenu_MenuItemDataBound(object sender, MenuEventArgs e)
{
  SiteMapNode n = e.Item.DataItem as SiteMapNode;
  string content = string.format("<div class='{0}'>{0}</div>", n.Title);
  e.Item.Text = content;
}

This gets the SiteMapNode associated with this menu item and uses the Title for the CSS Class name on a div; this div is then set as the text for the menu. This means each div would have a separate class. An alternative would be do add a custom attribute to the siteMapNode element and use that as the class:

<siteMapNode title="..." url="..." class="myclass" />

The event can then extract this:

public void MyMenu_MenuItemDataBound(object sender, MenuEventArgs e)
{
  SiteMapNode n = e.Item.DataItem as SiteMapNode;
  string content = string.format("<div class='{0}'>{1}</div>", n["class"], n.Title);
  e.Item.Text = content;
} 

You might want to do null checks to make sure the attribute is present.

I went with the alternative and it works perfectly.