Question

For this wordpress-site: http://bit.ly/NlBv9I I use sliding doors for the rounded corners and cufon for the font.
When I wanted to add a dropdown-menu, I ran into a problem with the hover of the “diensten”-tab. When I left the sub-menu through the bottom of the submenu my main-item wouldn’t go back to normal styling. With the superfish onHide function I managed to fix this, but now when I hover out the main item to the submenu, the main item’s color changes to the background color (so it becomes invisible). I tried to fix this with the onBeforeShow function and that works, but that breaks my first solution.

You can find the HTML here: http://bit.ly/NlBv9I

CSS:

ul {
    list-style:none;
    margin-bottom: 6px;
}

#main-nav li {
    float: left;
    margin-right: 2px;
    display: block;
}

#main-nav li a {
    color:#6f6f6f;
    font-size: 15px;
    padding: 4px;
    display: block;
    text-decoration: none;
}
#main-nav li.sfHover a {
    color:#fff;
}
#main-nav li:hover a, #main-nav li.current_page_item a, #main-nav li.current-menu-item a {
    color:#fff;
}
#main-nav li a:hover, #main-nav li.current_page_item a, #main-nav li.current-menu-item a {
    background: url(img/leftDoor.png) top left no-repeat;
}
#main-nav li:hover, #main-nav li.current_page_item, #main-nav li.current-menu-item {
    background: url(img/rightDoor.png) top right no-repeat;
}
#main-nav ul li.sfHover, #main-nav ul li.sfHover li  {
    background: url(img/rightDoor.png) top right no-repeat;
}
#main-nav ul li.sfHover a {
    background: url(img/leftDoor.png) top left no-repeat;
}
#main-nav ul.sub-menu a {
    color:#fff;
}
#main-nav .grey {
    color:#6f6f6f !important;
}
#main-nav .white {
    color:#fff !important;
}

JQuery:

$('#top .menu').superfish({
                    hoverClass:    'sfHover',
                autoArrows: false,
                delay:0,
                /*onBeforeShow: function() { $(this).prev().addClass('white'); },*/
                onHide: function() { $(this).prev().addClass('grey') }
            });

Thanks in advance!

Answer 1

I think you should use

Cufon.refresh();

When you are using Cufon font you need to use Cufon.refresh() after you change any style, say, you have used addClass('gray') and that class applies gray color to the font but if you don’t use Cufon.refresh() after you change the class then you can’t see the change. In other words, after changing the font style of any element dynamically that are using Cufon font you have to use Cufon.refresh(); to take effect.