Applying Css Style to Asp:Menu MenuItem

Question

Hi, I'm essentially creating a vertical breadcrumb to create a website navigation for a mobile (iphone) website. Similar to maybe how http://news.bbc.co.uk/sport1/hi/football/default.stm works as you click into "Premier League"

Using the Asp:Menu control and a SiteMapDataSource I am binding only the current levels links within the sitemap and then finding their parent to manually insert at the top of the list. An example resulting nav would be: About, Who Are We, What We Do, Locations

var mi = new MenuItem();
mi.NavigateUrl = node.Url;
mi.Text = node.Title;
mi.ToolTip = node.Description;

MobileMenu.Items.AddAt(0, mi);

This is all fine and works perfectly. However, this dynamically inserted top MenuItem needs to be styled in a different background colour. In the example above "About" would have a darker bg colour than the 3 items below it.

But there isn't any kind of obvious property on the MenuItem to do this.

How could I dynamically set a style on the MenuItem that I am inserting into position 0?

Answer 1

In answer to this I used the jQuery li:nth-child() method to set a class to the li after which I then use Page.ClientScript.RegisterStartupScript().

private const string HighlightScript =
        "<script language=\"javascript\">\n" +
        "$(\"ul.top li:nth-child(4)\").addClass(\"menu-Fourth\");" +
        "</script>";

public void AddHighlightScript(string script, string name)
    {
        Page.ClientScript.RegisterStartupScript(GetType(), name, script);
    }

If someone else has a solution please share.