Question

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

Answer 1

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
}