I would like to structure a menu bar in ASP.NET using the asp:Menu control and master pages.

The feature I am having trouble implementing is to have the menu item for the "current page" display in a style that is distinctive from all of the other menu items.

I have seen a few solutions for this that suggest something like this...
  1. Put a unige ID or Class attribute on the <body> tag of each page referenced in the menu. e.g. <body ID="Home"...> <body ID="Contact"...> etc.
  2. Put a unique ID on each <a> tag in the menu (or a class attribute on the <li> tag). e.g.
    <ul id="navbar">
    <li><a id="home_link" href="home.htm">HOME</a></li>
    <li><a id="contact_link" href="contact.htm">CONTACT</a></li>
    </ul>
  3. Create the following CSS...
    body#home a#home_link,
    body#contact a#contact_link
    { color: #000; background: #fff; } /* or whatever unique attributes are desired */
I have two problems with implementing this...
  1. Since the <body> tag is in the Master page I don't know how to set a unique ID on the <body> tag for each page.
  2. Both the <li> and <a> tags are generated from the asp.MenuItem so I don't see how to apply either an ID or a Class attribute.
If necessary I could forgo using the asp:menu control and just use simple HTML, but I would prefer to use the asp:menu control if that is possible. Even if I do resort to simple HTML (i.e. <ul> <li> <a> etc) for that part of the puzzle, I would really like to continue using a Master page.

This seems like a VERY common way to configure a menu so I am assuming there must be some sort of solution.

Any help will be greatly appreciated!!!

Thanks,
Steve