6

I'm trying to create a list nested within a list using XHTML Strict 1.0. The problem is that with XHTML strict a ul element can not be nested directly within another ul element. Thus, the inner ul element has to be nested within a li element. However, when doing it this way, the first row of the inner list get a dubble bullet, as shown in the example below. So now B gets a double bullet since the outer and inner li elements both create a bullet. Do anyone know how to fix this in CSS so that B is intended as a nested list, but only gets one bullet? Thanx!

  • A
    • B
    • C
    • D
  • E
    • F
    • L
    • H

XHTML for the above example:

<ul>
    <li>A</li>
    <li>
        <ul>
            <li>B</li>
            <li>C</li>
            <li>D</li>
        </ul>
    </li>
    <li>E</li>
    <li>
        <ul>
            <li>F</li>
            <li>L</li>
            <li>H</li>
        </ul>
    </li>
</ul>
Sampson
  • 265,109
  • 74
  • 539
  • 565
Tomas Vinter
  • 2,690
  • 8
  • 36
  • 45
  • could u use a dl instead of a ul? http://www.w3.org/TR/xhtml2/mod-list.html – Tim Feb 10 '10 at 08:08
  • possible duplicate of [How to write W3C compliant multi-level bullet points in HTML?](http://stackoverflow.com/questions/4465562/how-to-write-w3c-compliant-multi-level-bullet-points-in-html) – Techboy Mar 31 '14 at 09:22

2 Answers2

9

This is valid XHTML strict. The added bonus is that this actually describes the nesting much more semantically than if you put the nested list in a separate list item as the relationship between ("B", "C", "D" to parent "A") is described by this mark-up.

There is a suggestion about using a definition list (dl) instead, but you should only use that as intended (i.e. if you are displaying a list of definitions!)

  • A
    • B
    • C
    • D
  • E
    • F
    • L
    • H
<ul>
    <li>A
        <ul>
            <li>B</li>
            <li>C</li>
            <li>D</li>
        </ul>
    </li>
    <li>E
        <ul>
            <li>F</li>
            <li>L</li>
            <li>H</li>
        </ul>
    </li>
</ul>
Fenton
  • 241,084
  • 71
  • 387
  • 401
  • You're right, this works. Just be aware that (as @Juraj Blahunka notes below) there is a bullet added to each nested 'ul' in addition to the bullets for the nested 'li's. By default, it does not render the way your example did. – hotshot309 May 22 '12 at 19:04
  • Just for clarity - definitely no CSS needed. The CSS fix suggested is a double-hack because it is only needed if the markup places the nested list in an otherwise empty `
  • ` element, which you don't need to do. Double check the difference between the HTML in the original question and that in this answer. http://jsfiddle.net/g1neb028/
    • – Fenton Oct 29 '14 at 16:22