Asp.net menu selected item - asp.net

Question

I've been struggling with this asp.net Menu control problem for days and it's driving me crazy. Here the code:
<asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1" Orientation="Horizontal" CssClass="hrMainMenu" DynamicHorizontalOffset="1" >
<DynamicHoverStyle ForeColor="White" Font-Bold="True" />
<DynamicMenuItemStyle ForeColor="White" />
<DynamicMenuStyle Width="97px" HorizontalPadding="1px" />
<DynamicSelectedStyle ForeColor="White" />
<DynamicItemTemplate>
<div class="dinamicMenuItemTemplate">
<asp:Label ID="Label2" runat="server" Text='<%# Eval("Text") %>' EnableTheming="True"></asp:Label>
</div>
</DynamicItemTemplate>
<StaticMenuItemStyle ForeColor="White" CssClass="StaticMenuItemStyle" />
<StaticMenuStyle HorizontalPadding="10px" CssClass="StaticMenuStyle" />
<StaticSelectedStyle CssClass="staticMenuItemTemplateSelected" ForeColor="Red" />
<StaticItemTemplate>
<div class="staticMenuItemTemplate">
<div class="innerMenuElement">
<asp:Label ID="Label1" runat="server" Text='<%# Eval("Text") %>'></asp:Label></div>
</div>
</StaticItemTemplate>
</asp:Menu>
Now this is my css:
.staticMenuItemTemplate
{
background-position: left;
background-image: url('../../images/mainLayout/menuDefault.png');
background-repeat: no-repeat;
width: 100px;
text-align: center;
height: 25px;
position: relative;
top: 0px;
left: 0px;
}
.staticMenuItemTemplate:hover
{
background-image: url('../../images/mainLayout/menuHover.png');
background-repeat: no-repeat;
background-position: left;
font-weight: bold;
}
.staticMenuItemTemplateSelected
{
background-image: url('../../images/mainLayout/menuSelected.png') !important;
background-repeat: no-repeat !important;
background-position: left !important;
color: #FF00FF !important;
}
I want to display a different image when the menu item has been selected (menuSelected.png) but whilst the class staticMenuItemTemplate:hover seems to work and indeed the image changes, the class staticMenuItemTemplateSelected doesn't. Only the text gets pink as stated but the image won't change.
Thanks for your help.

Answer 1

I think the problem has to do with how the HTML renders for this control. In my tests, I end up with something like:
<td>
<a class="... staticMenuItemTemplateSelected ..." ...>
<div class="staticMenuItemTemplate">
<span>Menu text here</span>
</div>
</a>
</td>
So you can see that the <a> tag is getting the staticMenuItemTemplateSelected applied, but the inner <div> is getting the staticMenuItemTemplate class which ends up overriding the staticMenuItemTemplateSelected style since it is more specific.
If you change your declaration of .staticMenuItemTemplateSelected to
.staticMenuItemTemplateSelected .staticMenuItemTemplate
{
background-image: url('../../images/mainLayout/menuSelected.png') !important;
background-repeat: no-repeat !important;
background-position: left !important;
color: #FF00FF !important;
}
you will make that style more specific than the style for .staticMenuItemTemplate and it should work.
FireBug with FireFox is a great tool for investigating CSS weirdness issues.