:hover state doesn't go away on menus with submenus

[koesbong]

I have a drop down menu with the main menu text cufon-ed, and then a :hover state of color change. the problem is that when hovering over a menu item, submenu drops down and if you move your mouse down the list and off the drop down, the :hover state on the cufon-ed text remains.

example can be seen here: http://koesbong.com/tcabc/

steps to reproduce:

1. mouse over "about"
2. move mouse to "our story"
3. move mouse further down out of the dropdown box
4. the menu item will still be yellow even though it's no longer on :hover
5. if you mouse over "about" again and then move the mouse up, it clears the :hover state

any thoughts?

thanks!

-koes

[jonbro]

I was having a similar issue, I fixed it by adding the following code:

$("#sidebar ul#udm li a").hover(function(){
}, function(){
    Cufon.refresh();
});

the original selector that was failing was: #sidebar ul#udm > li > a

this requires jquery however.

[kirbysayshi]

Is there a way to fix this and call Cufon.refresh() on only the single element that needs it, even if that element's selector was not a part of the intial Cufon.replace() call?

[znewsome]

I'm having the same problem and can't seem to come up with a fix. Where exactly do I add the code jonbro gave?

[jonbro]

inside your $(document).ready(function(){ });

[znewsome]

appreciate that, but are we talking in the jquery.js file or the cufon.js file? I've done searches Sorry for my ignorance. I am designer that's in deeper than he wishes and needs to close out a project :(

[jonbro]

it doesn't matter which file it goes in, so long as it is inside of the document.ready. It should probably go right next to where you have your initial cufon replace.

[znewsome]

Jonbro,

I'm stuck on this one. I've tried adding your code, but can't seem to get it to work. If you have a minute, do you mind looking at the horizontal menu at http://www.compassmentalhealth.com/index.php/ and seeing if something pops out at you for a fix?

Thanks in advance for your help, Zack Newsome MethodLab

[jonbro]

sorry man, your code that I am looking at is far more complex than the issue that I was dealing with.

[iamike]

when the page load, js load. cufon start rendering the font. I clone two style and cufon. so all the each item I have two state. one for hover state, initially hiding( css display:none ). another is for no hover state(normal state), initially showing( CSS display:inline).

//add cufon style for primary nav, cufon active status for item 
$('DIV#topNavigationContainer UL LI SPAN').each(function(){

    $(this).clone().addClass('active').insertAfter(this);
    $(this).addClass('no-active');



});
Cufon.replace('DIV#topNavigationContainer UL LI SPAN A', { fontFamily:'Sabon-b'}) // primary nav

//hover status
$('DIV#topNavigationContainer UL LI:not("LI.Active")').hover(function(){
    $(this).find('SPAN.no-active').hide();
    $(this).find('SPAN.active').show();
},function(){
    $(this).find('SPAN.no-active').show();
    $(this).find('SPAN.active').hide();

})

and then using css to show/hide dropdown according to the first level LI's class has .active or .no-active.

correct me, if you have better idea on this. I know this is not officially solution.