menuitem doesn't show hover image - asp.net

Question

Menu items don't display the hover image option with the following code. I believe I have done the CSS correctly. Suggestions?
<asp:Menu ID="mnuMain" EnableViewState="false" IncludeStyleBlock="true" Orientation="Horizontal" runat="server">
<DynamicSelectedStyle CssClass="staticmenu" />
<StaticSelectedStyle CssClass="staticmenu" />
<StaticHoverStyle CssClass="staticmenu_hover" />
<DynamicHoverStyle CssClass="staticmenu_hover" />
<StaticMenuItemStyle HorizontalPadding="20px" />
<Items>
<asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home" ImageUrl="~/i/nest.jpg" Selected="true" />
<asp:MenuItem NavigateUrl="~/About.aspx" Text="About" ImageUrl="~/i/nest.jpg" />
</Items>
</asp:Menu>
.staticmenu
{
}
.staticmenu_hover
{
background-image:url('/i/bird_popup.gif');
}

Answer 1

I'm not sure how ASP adds the ImageUrl parameter to the element. But if it uses an inline style then it will always override your external CSS, and if it's an img element then your background-image style will have no visible effect.
I would suggest including both images as background-image styles in your CSS, and possibly using pure CSS to manage the image state, so it'd look more like this:
.staticmenu
{
background-image:url('/i/nest.jpg');
}
.staticmenu:hover
{
background-image:url('/i/bird_popup.gif');
}
Also note the image URLs in your CSS will be relative to the stylesheet's location, not the location of the document (unless there is a base tag specified in the head).