Asp.net menu selected item
<p>I've been struggling with this asp.net Menu control problem for days and it's driving me crazy. Here the code:</p>

<pre><code>&lt;asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1" Orientation="Horizontal" CssClass="hrMainMenu" DynamicHorizontalOffset="1" &gt;
    &lt;DynamicHoverStyle ForeColor="White" Font-Bold="True" /&gt;
    &lt;DynamicMenuItemStyle ForeColor="White" /&gt;
    &lt;DynamicMenuStyle Width="97px" HorizontalPadding="1px" /&gt;
    &lt;DynamicSelectedStyle ForeColor="White" /&gt;
    &lt;DynamicItemTemplate&gt;
        &lt;div class="dinamicMenuItemTemplate"&gt;
            &lt;asp:Label ID="Label2" runat="server" Text='&lt;%# Eval("Text") %&gt;' EnableTheming="True"&gt;&lt;/asp:Label&gt;
        &lt;/div&gt;
    &lt;/DynamicItemTemplate&gt;
    &lt;StaticMenuItemStyle ForeColor="White" CssClass="StaticMenuItemStyle" /&gt;
    &lt;StaticMenuStyle HorizontalPadding="10px" CssClass="StaticMenuStyle" /&gt;
    &lt;StaticSelectedStyle CssClass="staticMenuItemTemplateSelected" ForeColor="Red" /&gt;
        &lt;StaticItemTemplate&gt;
            &lt;div class="staticMenuItemTemplate"&gt;
                &lt;div class="innerMenuElement"&gt;
                    &lt;asp:Label ID="Label1" runat="server" Text='&lt;%# Eval("Text") %&gt;'&gt;&lt;/asp:Label&gt;&lt;/div&gt;
                &lt;/div&gt;
        &lt;/StaticItemTemplate&gt;
    &lt;/asp:Menu&gt;
</code></pre>

<p>Now this is my css:</p>

<pre><code>.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;
}
</code></pre>

<p>I want to display a different image when the menu item has been selected (menuSelected.png) but whilst the class <code>staticMenuItemTemplate:hover</code> seems to work and indeed the image changes, the class <code>staticMenuItemTemplateSelected</code> doesn't. Only the text gets pink as stated but the image won't change.</p>

<p>Thanks for your help.</p>
