styling asp.net 2.0 menu control

  • Thread starter Thread starter madhur
  • Start date Start date
M

madhur

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
 
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
Click to expand...

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.
 
Back
Top