sIFR doesn't apply to children in list

Question

I am unable to remove bullets in nested unordered lists after sIFR has been applied. I experinced this on a website I was creating.

I tried to create a basic HTML skeleton and apply the sIFR to easily figure out how to remove child bullets, but it didn't work here either.

<ul>
    <li>Option 1</li>
    <li>Option 2
        <ul id="menu">
            <li>Option 2-1</li>
            <li>Option 2-2
                <ul>
                    <li>Option 2-2-1</li>
                    <li>Option 2-2-2</li>
                    <li>Option 2-2-3</li>
                </ul>
            </li>
        <li>Option 2-3</li>
        </ul>
    </li>
</ul>

I seem to be unable to reference the inner ul's in any way. I've tried several selectors, including:

sIFR.replace(infinityt, {
  selector: 'li',
  css: ['.sIFR-root { list-style-type: none; list-style: none;  }', 'ul { list-style-type: none; list-style:none; }' ]
});

sIFR.replace(infinityt, {
  selector: '#menu',
  css: ['.sIFR-root { list-style-type: none; list-style: none; margin: 300px; }' ]
});

Answer 1

Did you try getting more specific on the CSS?

Like if the li's are being styled by a parent element, then you have to include that parent element in the CSS declaration to override it - and you could have been trying to attack the style by itself I think. Try something like: parent child child child style{}

or whatever it needs to overwrite it.

Answer 2

Fixed by wrapping the text in a span and sIFR the span. Normal CSS can then be used to remove bullets in the list.

    <ul>
        <li><span><a href="#">Option 1</a></span></li>
        <li><span><a href="#">Option 2</a></span>
            <ul>
                <li><span><a href="#">Option 2-1</a></span></li>