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>
Best Answer
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!)