CSS & HTML: nested lists with style

Tweet

One common mistake that I've found in many web pages is when a nested list is needed. Usually, we think that the following code is correct:

<ul class="list">
<li>A</li>
   <ul class="sublist">
     <li>1</li>
     <li>2</li>
     <li>3</li>
   </ul>
</ul>

Producing this:

• A
• 1
• 2
• 3

which looks good. But if you try to validate the above code, you will get some errors.

Why is a common mistake

The above mistake is quite common when we want to create menus using bulleted lists. That is the reason why in the above code we used two classes for the nested list. Building a menu, we can code it as:

<ul class="menu">
  <li>Menu 1</li>
   <ul class="submenu">
    <li>submenu 1</li>
    <li>submneu 2</li>
    <li>submenu 3</li>
   </ul>
</ul>

Is that correct? No, it isn't; even if it looks ok:

• Menu 1
• submenu 1
• submneu 2
• submenu 3

I believe the mistake is made because - eventually - the page looks good anyway, but only validating the page we discover it is not correct.

The correct way

In order to make our code pass the validation process, we need to strictly follow the nesting of the list elements:

<ul class="menu">
  <li>Menu 1</li>
  <li>
   <ul class="submenu">
    <li>submenu 1</li>
    <li>submenu 2</li>
    <li>submenu 3</li>
   </ul>
  </li>
</ul>

Producing the following result:

• Menu 1
• • submenu 1
  • submenu 2
  • submenu 3

Can you see now why we usually skip the second <li>? There's a bullet we don't really want. How to deal with that?

Styling the list elements

We can style the elements (and you were wondering why I used classes for the lists, uh?).
Styling the elements will help us to create the list as we wanted. Let's try to use something like:

<style type="text/css">
.menu {
    list-style:none;
    margin:0px 0 0px 0px;
    padding:0;
    text-indent:10px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: bold;
}
.submenu {
    margin:0;
    padding:0;
    list-style:none;
    text-indent:20px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: normal;
}
</style>

Which produces:

  Menu 1
     submenu 1
     submenu 2
     submenu 3


And that's what we wanted our list to look like. Further styling could be related to submenus <a> tags, or change the overall look with background colours or font size, colour etc.

The above examples are just a beginning. I've used lists for menus in conjunction with jQuery to create an accordion effect. It's up to you, how to use the above hint.

Enjoy, and let me know what you think or if you have problems.