Nesting ListsSometimes it's very helpful to have nested lists when using both unordered and ordered lists. A nested list is a list within a list. To create a correctly nested list in XHTML, the trick is to be sure the nest is contained completely within an open and closing list item element (see Example 2-6). Example 2-6. Nesting an Ordered List Within Another Ordered List<ol> <li>Beat eggs, flour, butter and sugar until creamy</li> <li>Pour into round baking pan</li> <li>Slowly add and swirl the following ingredients in order: <ol> <li>Add the chocolate sauce, </li> <li>Now, add the cinnamon crunchies, </li> <li>Add 1 tsp nutmeg</li> </ol> </li> <li>Place in oven and bake for 40 minutes</li> </ol> Figure 2-6 displays the results. Figure 2-6. Nesting ordered lists.You can use a variety of list types in combination when nesting, as follows:
Say you have an ordered list describing your recipe, but the added ingredients are optional rather than sequential (see Example 2-7). Example 2-7. Combining nested list types<ol> <li>Beat eggs, flour, butter and sugar until creamy</li> <li>Pour into round baking pan</li> <li>Slowly add and swirl any one or combination of the following ingredients: <ul> <li>chocolate sauce</li> <li>cinnamon crunchies,</li> <li>1 tsp nutmeg</li> </ul> </li> <li>Place in oven and bake for 40 minutes</li> </ol> Figure 2-7. Mixed ordered and unordered lists as displayed within a browser.You'll notice right away that any nested unordered list has an open rather than solid bullet. This is typical default browser behavior. Using CSS, you can modify the numbered and bullet styles for your nested lists.
|