Problem: When you use Cufon on a list, it will convert the style to all parent and child list items. This is an issue if you only want the top level items to be targeted, and not all sub level items as well.

Here is our sample HTML:

<div>
 <ul>
   <li><a href="#" >WHO WE ARE</a>

    <ul>
       <li><a href="#">Lorem Ipsum Dolor</a></li>
       <li><a href="#">Lorem Ipsum Dolor</a></li>
       <li><a href="#">Lorem Ipsum Dolor</a></li>
       <li><a href="#">Lorem Ipsum Dolor</a></li>
   </ul>

 </li>
</ul>
</div>

And our problem javascript:

Cufon.replace('.primary-navigation ul li a', {hover: true, fontFamily: 'Futura Std'});

Solution:
Just update your script to use the parent > child selector

Cufon.replace('.primary-navigation ul > li > a', {hover: true, fontFamily: 'Futura Std'});

I tried a bunch of other stuff first that Cufon didn’t really seem to like. Such as:

1. Creating a variable to store my selectors, and insert the variable into the Cufon.replace method
2. Trying some jquery filters like :has, :not, and .not()
3. Making my selectors really specific. Cufon seems to ignore CSS specificity.