Question

In uls the only valid elements are lis. To put another ul inside a ul I have to wrap it in an li like so:

Illegal:

<ul>
  <li>first outer item</li>
  <ul>
    <li>inner item 1</li>
    <li>inner item 2</li>
  </ul>
  <li>second outer item</li>
</ul>

Legal:

<ul>
  <li>First outer item</li>
  <li>
    <ul>
      <li>inner item 1</li>
      <li>inner item 2</li>
     </ul>
  </li>
  <li>Second outer item</li>
</ul>

My problem is the second in chrome (haven’t tested for other browsers) renders a bullet before the deeper bullet as below (two bullets before inner item 1. )

• First outer item
• • inner item 1
  • inner item 2
• Second outer item

Am I nesting it wrong? Should I fix this through CSS? (if so, a note how would be appreciated)

Answer 1

Presumably the nested items are related to the previous item. The sublist should go into that item and not into an item of its own.

<ul>
  <li>First outer item <!-- No </li> -->
  <!-- No <li> -->
    <ul>
      <li>inner item 1</li>
      <li>inner item 2</li>
     </ul>
  </li> <!-- </li> for First outer item AND the list of inner items associated with it -->
  <li>Second outer item</li>
</ul>