Il y a plein de tutoriels sur les listes en HTML, les balises spécifiques étant : <ul>, <ol>, <li>

On utilise les listes imbriquées pour des tables des matières ou des listes de liens hiérarchisées comme des menus.

Vous pouvez lire aussi cet article d'Alsacréations : Mes listes UL, OL, ou listes imbriquées ne sont pas valides (voir liens)

Pour ma part je vais vous montrer comment simplement utiliser les listes imbriquées pour créer un changelog comme celui de Gantry 5.

Vous trouvez ci après les codes de bases:

<div class="changelog">
<ol>
<li><a href="#new"></a>
<ul>
<li>Nouveauté 1</li>
<li>Nouveauté 2</li>
<li>Nouveauté 3</li>
</ul>
</li>
<li><a href="#improved"></a>
<ul>
<li>Amélioration 1</li>
<li>Amélioration 2</li>
<li>Amélioration 3</li>
</ul>
</li>
<li><a href="#bugfix"></a>
<ul>
<li>Bug fixe 1</li>
<li>Bug fixe 2</li>
<li>Bug fixe 3</li>
</ul>
</li>
</ol>
</div>

Les codes CSS sont :

.changelog ol{list-style:none;padding:0;margin:0 0 3rem 0}
.changelog ol a[href='#new']+ul>li:before{background-color:#207de5;content:'Nouveau'}
.changelog ol a[href='#improved']+ul>li:before{background-color:#fbca04;color:#333;content:'Amélioration'}
.changelog ol a[href='#bugfix']+ul>li:before{background-color:#fc2929;content:'Bug fix'}
.changelog ul{list-style:none;padding:0}.changelog ul li{margin-bottom:.1rem;padding-left:6rem}
.changelog ul li:before{margin-left:-6rem;display:inline-block;border-radius:2px;color:#fff;font-weight:bold;margin-right:1rem;text-align:center;width:5rem;font-size:.8rem;font-style:normal}

Les couleurs et les titres de chaque bouton sont modifiables

Le résultat final devient :

Bon codage !!