How to style an asp.net menu with CSS

I feel your pain and I wasted all night/morning trying to figure this out. With sheer brute force I figured out a solution. Call it a workaround - but it's simple.

Add the CssClass property to your Menu Control's declaration like so:

<asp:Menu ID="NavigationMenu" DataSourceID="NavigationSiteMapDataSource"
        CssClass="SomeMenuClass"
        StaticMenuStyle-CssClass="StaticMenuStyle"
        StaticMenuItemStyle-CssClass="StaticMenuItemStyle"
        Orientation="Horizontal" 
        MaximumDynamicDisplayLevels="0" 
        runat="server">
</asp:Menu>

Just rip out the StaticSelectedStyle-CssClass and StaticHoverStyle-CssClass attributes as they simply don't do jack.

Now create the "SomeMenuClass", doesn't matter what you put in it. It should look something like this:

.SomeMenuClass
{
    color:Green;
}

Next add the following two CSS Classes:

For "Hover" Styling add:

.SomeMenuClass a.static.highlighted
{
    color:Red !important;
}

For "Selected" Styling add:

.SomeMenuClass a.static.selected
{
    color:Blue !important;
}

There, that's it. You're done. Hope this saves some of you the frustration I went through. BTW: You mentioned:

I seem to be the first one to ever report on what seems to be a bug.

You also seemed to think it was a new .NET 4.0 bug. I found this: http://www.velocityreviews.com/forums/t649530-problem-with-staticselectedstyle-and-statichoverstyle.html posted back in 2008 regarding Asp.Net 2.0 . How are we the only 3 people on the planet complaining about this?

How I found the workaround (study the HTML output):

Here is the HTML output when I set StaticHoverStyle-BackColor="Red":

#NavigationMenu a.static.highlighted
{
    background-color:Red;
}

This is the HTML output when setting StaticSelectedStyle-BackColor="Blue":

#NavigationMenu a.static.selected
{
    background-color:Blue;
    text-decoration:none;
}

Therefore, the logical way to override this markup was to create classes for SomeMenuClass a.static.highlighted and SomeMenuClass a.static.selected

Special Notes:

You MUST also use "!important" on ALL the settings in these classes because the HTML output uses "#NavigationMenu", and that means any styles Asp.Net decides to throw in there for you will have inheritance priority over any other styles for the Menu Control with the ID "NavigationMenu". One thing I struggled with was padding, till I figured out Asp.Net was using "#NavigationMenu" to set the left and right padding to 15em. I tacked on "!important" to my SomeMenuClass styles and it worked.

Alright, so there are obviously not a whole lot of people who have tried the .NET 4 menu as of today. Not surprising as the final version was released a couple days ago. I seem to be the first one to ever report on what seems to be a bug. I will report this to MS if I find the time, but given MS track-record of not paying attention to bug reports I'm not rushing this.

Anyway, at this point the least worst solution is to copy and paste the CSS styles generated by the control (check the header) into your own stylesheet and modify it from there. After you're done doing this, don't forget to set IncludeStyleBlock="False" on your menu so as to prevent the automatic generation of the CSS, since we'll be using the copied block from now on. Conceptually this is not correct as your application shouldn't rely on automatically generated code, but that's the only option I can think of.

I remember the StaticSelectedStyle-CssClass attribute used to work in ASP.NET 2.0. And in .NET 4.0 if you change the Menu control's RenderingMode attribute "Table" (thus making it render the menu as s and sub-s like it did back '05) it will at least write your specified StaticSelectedStyle-CssClass into the proper html element.

That may be enough for you page to work like you want. However my work-around for the selected menu item in ASP 4.0 (when leaving RenderingMode to its default), is to mimic the control's generated "selected" CSS class but give mine the "!important" CSS declaration so my styles take precedence where needed.

For instance by default the Menu control renders an "li" element and child "a" for each menu item and the selected menu item's "a" element will contain class="selected" (among other control generated CSS class names including "static" if its a static menu item), therefore I add my own selector to the page (or in a separate stylesheet file) for "static" and "selected" "a" tags like so:

a.selected.static
{
background-color: #f5f5f5 !important;
border-top: Red 1px solid !important;
border-left: Red 1px solid !important;
border-right: Red 1px solid !important;
} 

I ran into the issue where the class of 'selected' wasn't being added to my menu item. Turns out that you can't have a NavigateUrl on it for whatever reason.

Once I removed the NavigateUrl it applied the 'selected' css class to the a tag and I was able to apply the background style with:

div.menu ul li a.static.selected
{
    background-color: #bfcbd6 !important;
    color: #465c71 !important;
    text-decoration: none !important;
}