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

On Aug 3, 2:11 pm, madhur  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.