A list that contains two nested lists

The following example shows how we can use CSS together with UL to create nested list.

 
<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<style> 
body { 
   counter-reset: OuterItemCount 5 InnerItemCount; 
} 
#outerlist > li:before { 
    content: counter(OuterItemCount) ". "; 
    counter-increment: OuterItemCount 2; 
} 
ul.innerlist > li:before { 
    content: counter(InnerItemCount, lower-alpha) ". "; 
    counter-increment: InnerItemCount; 
} 
</style> 
</head> 
<body> 
    <ul id="outerlist" style="list-style-type: none"> 
        <li>A</li> 
        <li>B:</li> 
        <ul class="innerlist"> 
            <li>C</li> 
            <li>D</li> 
            <li>E</li> 
        </ul> 
        <li>F</li> 
        <li>G: 
        <ul class="innerlist"> 
            <li>H</li> 
            <li>I</li> 
            <li>J</li> 
        </ul> 
        </li> 
        <li>K</li> 
        <li>H</li> 
    </ul> 

</body> 
</html>
  
Click to view this demo.
Home 
  HTML CSS Book 
    HTML  

ul:
  1. <ul> for unordered lists
  2. A list that contains two nested lists
Related: