Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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>
like image 945
Tomas Vinter Avatar asked Feb 10 '10 08:02

Tomas Vinter


1 Answers

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>
like image 83
Fenton Avatar answered Oct 28 '22 10:10

Fenton