Cufon selector problems

Question

Hello StackOverflow.

I am using Cufon (http://cufon.shoqolate.com/generate/) to replace some text in a menu.

Problem is that I only need to style the first <li> of the first <ul>.

I have tried using:

Cufon.replace('#menu ul li > a', { fontFamily: 'Christopherhand', hover: { color: '#99c635'}});

With the > seperator, but it does not work. It still replaces the #menu ul li ul li a

This is my markup:

<div id="menu">
    <ul>
        <li class="current">
            <a href="#1">About JW</a>
            <ul>
                <li><a href="#2">Subpage 1</a></li>
                <li><a href="#3">Subpage 2</a></li>
                <li><a href="#4">Subpage 3</a></li>
                <li><a href="#5">Subpage 4</a></li>
            </ul>
        </li>
        <li><a href="#2">Our Products</a></li>
        <li><a href="#3">Best Recipes</a></li>
        <li><a href="#4">Health &amp; Diet</a></li>
        <li><a href="#5">Our Ads</a></li>
    </ul>
</div>

Can anyone see the problem? It should work without adding a class to sub <ul>. :-)

Thank you.

Answer 1

You can use:

Cufon.replace('#menu > ul:first > li:first > a');

but you have to include jQuery before cufon import in order to use such selector.

http://wiki.github.com/sorccu/cufon/usage