styling asp.net 2.0 menu control

I am trying to apply the hover style to the Menu Control.
Here is the code snippet

<SharePoint:AspMenu id="QuickLaunchMenu"
DataSourceId="QuickLaunchSiteMap" runat="server"
Orientation="Vertical" StaticDisplayLevels="2" ItemWrap="true"
MaximumDynamicDisplayLevels="0" StaticSubMenuIndent="0"
SkipLinkText="">
<StaticHoverStyle CssClass="ms-LeftNavHover" />
<DynamicHoverStyle CssClass="ms-LeftNavHover"
BackColor="#697D98" />

<LevelMenuItemStyles>
<asp:menuitemstyle CssClass="ms-navheader" />
<asp:menuitemstyle CssClass="ms-navitem" />
</LevelMenuItemStyles>
<LevelSubMenuStyles>
<asp:submenustyle CssClass="ms-navSubMenu1" />
<asp:submenustyle CssClass="ms-navSubMenu2" />
</LevelSubMenuStyles>
<LevelSelectedStyles>
<asp:menuitemstyle CssClass="ms-selectednavheader" />
<asp:menuitemstyle CssClass="ms-selectednav" />
</LevelSelectedStyles>
</SharePoint:AspMenu>

I am trying to apply a background color to a menu item when it is
hovered using the line
<DynamicHoverStyle CssClass="ms-LeftNavHover" BackColor="#697D98" />

However the problem is that , background color gets applied only to
the text, not the whole rectangular item.

I have a different background set in the style ms-navheader which is
applied to the rectangular area around the text. I expect the same
color to be replaced while applying hover style but only the
background of the text is replaced and not the whole item.

Hope I have explained my problem clearly and will appreciate any ideas

Madhur

madhur

On Aug 3, 2:11 pm, madhur <ahuja.mad...@gmail.com> wrote:
> I am trying to apply the hover style to the Menu Control.
> Here is the code snippet
>
> <SharePoint:AspMenu id="QuickLaunchMenu"
> DataSourceId="QuickLaunchSiteMap" runat="server"
> Orientation="Vertical" StaticDisplayLevels="2" ItemWrap="true"
> MaximumDynamicDisplayLevels="0" StaticSubMenuIndent="0"
> SkipLinkText="">
> <StaticHoverStyle CssClass="ms-LeftNavHover" />
> <DynamicHoverStyle CssClass="ms-LeftNavHover"
> BackColor="#697D98" />
>
> <LevelMenuItemStyles>
> <asp:menuitemstyle CssClass="ms-navheader" />
> <asp:menuitemstyle CssClass="ms-navitem" />
> </LevelMenuItemStyles>
> <LevelSubMenuStyles>
> <asp:submenustyle CssClass="ms-navSubMenu1" />
> <asp:submenustyle CssClass="ms-navSubMenu2" />
> </LevelSubMenuStyles>
> <LevelSelectedStyles>
> <asp:menuitemstyle CssClass="ms-selectednavheader" />
> <asp:menuitemstyle CssClass="ms-selectednav" />
> </LevelSelectedStyles>
> </SharePoint:AspMenu>
>
> I am trying to apply a background color to a menu item when it is
> hovered using the line
> <DynamicHoverStyle CssClass="ms-LeftNavHover" BackColor="#697D98" />
>
> However the problem is that , background color gets applied only to
> the text, not the whole rectangular item.
>
> I have a different background set in the style ms-navheader which is
> applied to the rectangular area around the text. I expect the same
> color to be replaced while applying hover style but only the
> background of the text is replaced and not the whole item.
>
> Hope I have explained my problem clearly and will appreciate any ideas
>
> Madhur

CSS can behave strangely because tags inherit styles. I can't tell you
the exact answer, but with CSS I always perform these steps to debug.
First, remove all the styles. Then Apply them 1 at a time. That should
tell you which one is overriding the other.