CODEWITHSUNDEEP
htmllisthtml-lists
Martijn
Martijn

Reputation: 12091

Get rid of extra bullets for nested uls

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. )

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

Upvotes: 1

Views: 791

Answers (1)

Quentin
Quentin

Reputation: 943108

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>

Upvotes: 5

Related Questions