Search code examples
csssuperfish

Superfish First Level: Maintain Hover Properties

The problem: http://themeforward.com/demo2/

When I hover over a menu item and begin to mouse down the sub-menu the parent link (i.e. "Templates") loses the properties attributed to it on-hover. I would like it to maintain these properties. I've tried numerous variations to achieve this and have been unable to do so. I assume this is achievable via CSS with Superfish and that I'm simply using the incorrect class.

My css: http://snippi.com/s/hv7m288

Solution

  • It's because the hover event is attached to the <a>, but the submenu is a child of the <li>. So adding a hover to the <li> will fix it.

    Here is a fiddle http://jsfiddle.net/7kYF6/

    I changed this

    .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
    color:#868E98!important;
    background:#3C4751
}

    to this and it worked for me

    .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active, .sf-menu li:hover a {
    color:#868E98!important;
    background:#3C4751
}