How To Style Nested Lists
How To Style Nested Lists Using HTML And CSS
Styling nested lists can be tricky. So this tutorial gives you an example that you can use to build your own nested lists and style them however you want. Normally you will want to have a different list-style-type for each level of the list.
In this example I use decimals on the outer level, lower case Roman on the second level and lowercase alpha on the third level.
View Tutorial Demo Site
Tutorial For Styling Nested Lists
Please follow these steps.
- Add The HTML
- Create a new page
- Give thepage a title of Nested Lists
- Add the following HTML
- Publish the page
- Add The CSS
- Open Genesis Extender Custom
- Make sure you are on the CSS tab
- Paste the following into the Custom CSS editor
- Click on Save Changes
- Review Your Work
- Check that the list is showing with each level using a different numbering system.