Question

I have a very basic and usual list menu with a submenu:

<ul>
    <li>Home</li>
    <li>
        About
        <ul id="sub-menu">
            <li>Child1</li>
            <li>Child2</li>
        </ul>
    </li>
</ul>

And then I have a Cufon selector applying a font to the menu:

Cufon.replace('ul li a');

Is there any way to select only the first level of the menu and disregard the other? Right now both levels get the font, but I would like to use something else for submenu.

I am very much a beginner with Javascript, Cufon and jQuery, I tried using child selectors but I had no luck with that. How can I achieve this?

Answer 1

It appears that your JavaScript library uses CSS-style selectors; you can just use

<ul class='containingMenu'>
 <li>Home</li>
 <li>
    About
    <ul id="sub-menu">
        <li>Child1</li>
        <li>Child2</li>
    </ul>
 </li>
</ul>

with this selector

ul.containingMenu > li > a

where the > causes the selector to apply only to a‘s that are direct children of li‘s that are direct children of the ul.containingMenu.

↪ See this example in action at JSFiddle.