I am using the DNN Nav 2 menu in the header.ascx for my skin.  I've noticed now on several sites I have completed that the main menu item will not stay highlighted while the mouse is hovering over its submenu items.  Studying the rendered document object tree, I notice that the main menu item is a <span> followed by a <table> that represents the submenu.  How can I make the main menu item remain highlighted while the mouse hovers over the submenu items?

I notice some interesting detail.  If I style the submenu such that there is a margin between the table and the cells, the following behavior is exhibited:  while the mouse is over the cells the main menu item is not highlighted.  However, if the mouse is moved out into the margin around the submenu cells then the main menu item is highlighted again. 

Here is the main menu item highlight:

.headMenu .root.hov
{
    vertical-align: middle;
    background-color: #fff;
    color: #0080b1;
}

Then the submenu rollover:

.headMenu tr.hov td
{
    color: #fff;
    background: none;
    background-color: #f58832;
    text-decoration: none;
}

How do I link these two such that hovering over the latter activates the former.

Regards,
Guy..Lister
CSI
513-252-7191



 

Hi Guy Lister,

I have same issues. Have you got solution for this? I am using DNN 5.

How to highlight the parent menu item when user mouse hover on the sub menu.

Thanks,
Ruchir