Cufon with hover on parent element

This is what I have: http://thezoomer.net/clubroyale/

I applied Cufon on the a element inside the .nav-item

Cufon.replace('.nav-item a', {fontFamily: 'Yanone Kaffeesatz',
                                    hover:true,
                                    hoverables: { li:true }
                                    });

This is what I have inside the menu

<li class="nav-item"><a href="./">HOME</a></li>

and this is what I have inside the css

.nav-item{
     color: #a8956c;
     background-color:#fff;
     cursor:pointer;

    white-space:nowrap;
}   
.nav-item:hover{
     color: #fff;
     background-color:#a8956c;

}

Evidently, I want the css hover to work. I know It will not work in this state because Cufon has tied the refresh to the a element and not the whole parent element (which is tied from the css ). However, if I apply the css to .nav-item a the hover will work but only on the portion of the menu element.

Also, I have tried applying Cufon on .nav-item without the a, the hover works but some Cufon draws some weird white spaces without having to.

So, is there something like hoverables: { parent:true } for the element to receive hover events from the parent element too ?

Thanks!

This seems to work as expected:

JS:

Cufon.replace('.nav-item a', { fontFamily: 'Yanone Kaffeesatz', hover: true });

CSS:

.nav-item a {
    color: #a8956c;
}

.nav-item a:hover {
    color: #fff;
}