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

Question

Hi,

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>

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>

Answer 2

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