There are plenty of tutorials on lists in HTML, the specific tags being : <ul>, <ol>, <li>
Nested lists are used for tables of contents or hierarchical link lists such as menus.
You can also read this Alsacréations article: My UL, OL, or nested lists are not valid (see links)
For my part I'll show you how to simply use nested lists to create a changelog like the one in Gantry 5.
You find below the basic codes:
<div class="changelog-en"> <ol> <li><a href="#new"></a> <ul> <li>News 1</li> <li>News 2</li> <li>News 3</li> </ul> </li> <li><a href="#improved"></a> <ul> <li>improved 1</li> <li>improved 2</li> <li>improved 3</li> </ul> </li> <li><a href="#bugfix"></a> <ul> <li>Bug fix 1</li> <li>Bug fix 2</li> <li>Bug fix 3</li> </ul> </li> </ol> </div>
French usage
<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 h5{margin-bottom:.5rem;} .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;} .changelog-en h5{margin-bottom:.5rem;} .changelog-en ol{list-style:none;padding:0;margin:0 0 3rem 0;} .changelog-en ol a[href='#new']+ul>li:before{background-color:#207de5;content:'New';} .changelog-en ol a[href='#improved']+ul>li:before{background-color:#fbca04;color:#333;content:'Improved';} .changelog-en ol a[href='#bugfix']+ul>li:before{background-color:#fc2929;content:'Bug fix';} .changelog-en ul{list-style:none;padding:0;} .changelog-en ul li{margin-bottom:.1rem;padding-left:6rem;} .changelog-en 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;}
The colors and titles of each button are editable
The end result becomes :
French usage
Good coding !!