How can I produce an nested list in XHTML strict without giving the nested lists first element a double bullet?

Question

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>

Drat

could u use a dl instead of a ul? w3.org/TR/xhtml2/mod-list.html – Lamellicorn

possible duplicate of How to write W3C compliant multi-level bullet points in HTML? – Enzymolysis

Answer 1

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>

Cella

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. – Elflock

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 <li> element, which you don't need to do. Double check the difference between the HTML in the original question and that in this answer. jsfiddle.net/g1neb028 – Cella

Answer 2

 ul ul > li:first-child { list-style-type: none; }

Ackerley

That removes the second set of bullets, not the first set. – Mendacity

Agreed--the bullet you want to remove in this case is from ul ul. Then you'll have to deal with the extra indentation. – Elflock