Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
300
HorizontalRootSelected class is applied on hover when ActivateOnHover=True
posted

Hi

For some reason the igdm_MenuItemHorizontalRootSelected css class is applied to to the menu items when you hover over an item when ActivateOnHover="true".  I would have thought that the Selected css should only be applied once an item is clicked and the igdm_MenuItemHorizontalRootActive should be what controls the Active style when you hover?

Are we able to stop this from happening?

It wouldn't be such a problem if once you stopped hovering (ie, took cursor away from the menu) it went back to highlighting the selected item, but the item you hovered over remains with the RootSelected css style applied.  I have attached an image of what happens.

If it helps, the CSS classes which we have defined (the stylesetname = SecondLevelMenu) are shown below;

Thanks

Marcus

/******************************** ROOT ELEMENTS - Group and Item ***************************************/
/** Definitions for Root elements should be always before definitions of subElements **/
.igdm_SecondLevelMenuMenuGroupHorizontalRoot
{
    margin:0px;
    padding-top:0px;
    padding-left:0px;
    list-style-type: none;
    cursor:default;
    color: White;
    line-height: 25px;  /*height of the menu items*/
    border-top:solid 1px #404040;
}

.igdm_SecondLevelMenuMenuItemHorizontalRoot
{
    border-top:solid 1px #9E9E9E;
    border-left:solid 1px #949494;
    border-right:solid 1px #404040;
    border-bottom: 0px;
    padding: 10px 12px 0px 12px;
    font-family: Verdana;
    font-size: 12px;
    text-align: center;
    _border: 0px;
    _background: none;
    color: white; /*#1E395B;*/
}

/******* Controls position of the drop down icon   *********/
.igdm_SecondLevelMenuMenuItemHorizontalIcon
{
    border-style:none;
    border-width:0px;
    padding-top: 13px;
    padding-left: 4px;
    clear: none;
    float: right;
    text-align:right;
    vertical-align:middle;
}


.igdm_SecondLevelMenuMenuItemHorizontalRootLink
{
    vertical-align: bottom;
    display: block;
    color: white;
    cursor:default;
    text-decoration:none;
}

.igdm_SecondLevelMenuMenuItemHorizontalRootActive
{    
}

.igdm_SecondLevelMenuMenuItemHorizontalRootSelected
{
    background-color: white;
}

.igdm_SecondLevelMenuMenuItemHorizontalRootHover
{
    background-color: #393939;
    color: white;
}
.igdm_SecondLevelMenuMenuItemHorizontalRootHover a:link
{
    color: white;
}
.igdm_SecondLevelMenuMenuItemHorizontalRootHover a:visited
{
    color: white;
}