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 & 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.
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.