How to write W3C compliant multi-level bullet points in HTML?

Is it possible to write W3C compliant multi-level bullet points (unordered list) in HTML?

Nested ul can be used, but is not W3C compliant.

 <ul>
     <li>myItem 1</li>
     <li>myItem 2</li>
     <ul>
        <li>myItem 2a</li>
     </ul>
     <li>myItem 3</li>
     <li>myItem 4</li>
 </ul>
  • myItem 1
  • myItem 2
    • myItem 2a
  • myItem 3
  • myItem 4

In Visual Studio, the above code gives the warning: Validation (XHTML 1.0 Transitional): Element 'ul' cannot be nested within element 'ul'


Solution 1:

The only valid child of either a ul or ol is an li element; an li can, however, contain a ul (or ol). To achieve your aim:

<ul>
  <li>myItem 1</li>
  <li>myItem 2</li>
  <li style="list-style-type:none">
    <ul>
      <li>myItem 2a</li>
    </ul>
  </li>
  <li>myItem 3</li>
  <li>myItem 4</li>
</ul>

Solution 2:

Complementing David Thomas answer, this would remove the unwanted bullet:

<ul>
    <li>myItem 1</li>
    <li>myItem 2        
        <ul>
            <li>myItem 2a</li>
        </ul>
    </li>
    <li>myItem 3</li>
    <li>myItem 4</li>
</ul>