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

Question

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'

Fingertip

What does the validator complain about when you tried it? Please post sample HTML and exact validation output. – Viridissa

Have you tried putting an <ul> inside a <li> and seeing what the validator says? – Shipboard

You should be able to naturally. If not, you're doing it wrong. – Compatriot

As this thread bore out, that's not the case, Ben. Here is a similar thread: #2235757 – Dawnedawson

Answer 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>

Cuyler

...if someone could edit my code block as code, it'd be appreciated (I don't know if it's the weirdness of iPhone editing, or my own misuse that's screwing it up, despite repeated attempts). – Cuyler

I haven't got enough points to edit your answer :-( Your code creates an unwanted bullet point. How can I get rid of that? Thanks. – Fingertip

WTF? The last <ul> broke the entire formatting until I removed all the spaces. Never seen that before. Must have been some evil Apple trickery :) – Nous

Thanks @Pekka, I'm glad it wasn't just me that was confused, I had started to worry =) – Cuyler

This is not the answer because it creates an unwanted bullet (before the nested <ul>). – Fingertip

It's the only valid (x)html solution. The extra bullet should be dealt with via css. I'd suggest asking a separate question for help with that problem. – Cuyler

Actually all you have to do is put the nested UL in the 2nd li rather than creating a blank one. Then you won't get the unwanted bullet – Forensic

Answer 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>

Slaveholder

NB: it requires at least one li element in parent ul – Undergarment

This is, in fact, the correct answer. The point is that muItem 2a is indented because it is nested inside myItem 2, so the ul should be nested inside its li – Bubo

It worked perfectly well for me, and it is simpler that David Thomas solution. Thanks to Marlon – Orris

Best and simplest answer. – Gang