Keeping a menu style when Dynamic menus hovered or selected

SouthendSupporter · November 8th, 2009, 12:21 PM

Hi,
I have a set of menu styles defined which enable me to show menu items appearing over a bar and moving under a bat and changing color when hovered or selected.

However, when I hover or select a sub dynamic menu itm the main item defaults to the StaticmenuItemStyle.

Is there a sufix I can add to a style (like the :visited) which will keep the StaticSelected style and/or statichoverstyle when I am hovering over or have selected a dynamic item below it?

My styles:

Code:

/* main pages menu Styles */
.menu
{
  padding-left: 5px;
  /*margin-bottom: 13px;*/
  /*float: right;*/
  z-index: 1; 
  height:64px;
  width: 980
 }


.StaticMenuItemStyle, .StaticMenuItemStyle:visited
{
  font-size: 14px;
  padding-left: 5px;
  padding-top: 2px;
  padding-right: 5px;
  padding-bottom: 30px;
  font-family: Verdana;
  color: navy;
  text-align: center;
  height: 32px;
  width: 145px;
 }
.StaticSelectedStyle, .StaticSelectedStyle:visited
{
font-size: 14px;
padding-left: 5px;
padding-top: 30px;
padding-right: 5px;
padding-bottom: 2px;
color: Gray;
Font:weight: bold;
font-family: Verdana;
text-align: center;
height:32px;
width:145px;
}
.StaticHoverStyle, .StaticHoverStyle:visited
{
font-size: 14px;
padding-left: 5px;
padding-top: 30px;
padding-right:5px;
padding-bottom:2px;
font-family: Verdana;
color: Red;
height:32px;
width:145px;
}
.DynamicMenuItemStyle
{
Font-Size:14px;
Padding-left:10px;
color:Navy;
}
.DynamicHoverStyle
{
Color:red;
}

Thanks

Imar · November 8th, 2009, 02:19 PM

The DynamicHoverStyle and StaticHoverStyle items should do the trick, but maybe they are overriden somewhere?

You can try the :hover pseudo selector:

.Someclass:hover

or

a:hover

Hope this helps,

Imar

SouthendSupporter · November 8th, 2009, 06:48 PM

Thanks for the suggestion Imar.
I can't see that anything is being overwittn.
In my aamaster page I have the menu set ip as :

Code:

<div id="menu">
         <asp:Menu ID="Menu1" runat="server" Orientation="Horizontal"  
             DataSourceID="SiteMapDataSource1" cssClass="menu"  align="center"
                StaticEnableDefaultPopOutImage="False">
            <StaticSelectedStyle CssClass="StaticSelectedStyle" />
            <StaticMenuItemStyle CssClass="StaticMenuItemStyle" />
            <StaticHoverStyle cssclass="StaticHoverStyle"/>
            <DynamicMenuItemStyle CssClass="DynamicMenuItemStyle" />
            <DynamicHoverStyle cssclass="DynamicHoverStyle"/>
         </asp:Menu>
           <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="False" />
       </div>

Re the : hover....
I have tried:

Code:

.StaticSelectedStyle, .StaticSelectedStyle:visited, StaticSelectedStyle:hover

and

Code:

.StaticSelectedStyle, .StaticSelectedStyle:visited, StaticSelectedStyle:a

Is this what you meant?
neither has any affect: the main menu item goes to the Hover style when I hover, but reverts to the statis style when I hover over or select a Dynamic item The Dynamic items behave as expected.

If I select a menu item, the StaticSelected style applys and sticks when I hover over dynamic items. As soon as I select a dynamic item the main item reverts to the staticmenuitem style.
My web.sitemap looks like this:

Code:

<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
    <siteMapNode url="~/" title=""  description="" >
      <siteMapNode url="~/default.aspx" title="Home"  description="Home page" />
      <siteMapNode url="~/Profile.aspx" title="About"  description="About xxx" />
      <siteMapNode url="~/Testimonials.aspx" title="Testimonials"  description="Testimonials" />
      <siteMapNode url="~/Products.aspx" title="Products/Services"  description="Products or Services">
          <siteMapNode url="~/product1.aspx" title="Product 1"  description="Products or Services"/>
          <siteMapNode url="~/product2.aspx" title="Product 2"  description="Products or Services"/>
      </siteMapNode>
      <siteMapNode url="~/Contact.aspx" title="Contacts"  description="Contact Us" />
    </siteMapNode>
</siteMap>

Any additional help welcomed.

Imar · November 9th, 2009, 12:57 PM

Hi Geiff,

Maybe the order of the declarations is not right? When setting up these pseudo classes such as visited and hover, you need to remember the LoVe HAte trick (or LoVe For HAte for focus as well):

Link
Visited
Focus
Hover
Active

http://www.d.umn.edu/itss/support/Tr.../lovehate.html

Hope this helps,

Imar