Home arrow HTML arrow Styling Elements of Nested HTML Lists

Styling Elements of Nested HTML Lists

Welcome to the second part of a three-part series on designing with nested HTML lists. This series shows you how to nest HTML lists by using a hands-on approach, and demonstrates how to use them for building standards-compliant drop-down menus.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 1
May 22, 2009
  1. · Styling Elements of Nested HTML Lists
  2. · Review: building basic nested HTML lists
  3. · Polish the look of nested HTML lists with CSS styles
  4. · Building a hierarchical navigational system

print this article

Styling Elements of Nested HTML Lists
(Page 1 of 4 )


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!

blog comments powered by Disqus

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials