Styling Elements of Nested HTML Lists

Introduction

As you possibly know, HTML lists are a crucial piece of most web sites’ structural markup. They allow you to group bulleted data using a strict semantic meaning. But what happens if you need to extend the use of lists beyond the usual and construct, for instance, a hierarchical links bar for your next web site?

The answer is simply…nested lists. By including one list into another as many times as needed, it is possible to build non-linear navigational mechanisms using clean HTML, in addition to displaying information in the form of well-structured categories. Therefore, if you’re a web designer who’s interested in learning the core concepts that surround the creation of nested lists, then this set of comprehensive articles might be what you’re looking for.

However, before I start explaining how to build such a menu, first I need to quickly review the topics that I discussed in the last article. In that tutorial I coded a few examples that hopefully demonstrated how to build some basic nested HTML lists by using a standard approach.

Indeed, the structures of these sample nested lists were fairly skeletal, since no CSS styles were applied to the lists in question. Provided that you already grasped the logic that drives constructing the lists, the next step consists of improving the visual appearance of these web page elements.

Thus, it’s time to get rid of all the preliminaries and start learning how to polish the look of nested HTML lists using a few simple CSS styles. Let’s jump in!