Remove double bullets in nested list

Question

Nested list have double bullets. One for the li and another for the child list.

example

    <ul>
        <li>item</li>
        <li>item</li>
        <li>
            <ul>
                <li>item</li>
                <li>item</li>
                <li>item</li>
            </ul>
        </li>
    </ul>

Answer 1

You can’t do this just in an external style sheet (as I presume you would want to). The reason is that there is no selector in CSS that would pick up those li elements that have a ul element as the first child. So your options are (apart from waiting indefinitely until CSS has a “parent selector”...):

• Add class to such li elements and use a class selector. This is normally the preferred way.
• Use JavaScript that recognizes such li elements and handles them, e.g. adding a class to them.
• Use inline CSS, i.e. style attribute in those li elements.

Answer 2

The nested list should be a child of one of the list items, like so:

<ul>
  <li>item</li>
  <li>item
    <ul>
      <li>item</li>
    </ul>
  </li>
</ul>

This is valid HTML.