Tutorial 3 - Nested lists

Step 10 - Separate the list items

The list items can now be separated so that they are easier to distinguish. Separating nested list items using margins is not recommended as it is not stable across browsers. A safer method is to use borders such as "border-bottom: 1px solid #fff".

For Opera, it is important to set the LI margins to "0" to avoid gaps. This is done using the following rule "#navcontainer li { margin: 0; }".

The basic list is now complete, but there is still no difference between main sections and sub-sections.

Go to Step 11 →

CSS CODE
#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
}

#navcontainer li { margin: 0; }

#navcontainer a
{
display: block;
color: #FFF;
background-color: #036;
width: 9em;
padding: 3px 12px 3px 8px;
text-decoration: none;
border-bottom: 1px solid #fff;
}

#navcontainer a:hover
{
background-color: #369;
color: #FFF;
}


HTML CODE
<div id="navcontainer">
<ul>
<li><a href="#">Milk</a>
   <ul>
   <li><a href="#">Goat</a></li>
   <li><a href="#">Cow</a></li>
   </ul>
</li>
<li><a href="#">Eggs</a>
   <ul>
   <li><a href="#">Free-range</a></li>
   <li><a href="#">Other</a></li>
   </ul>
</li>
<li><a href="#">Cheese</a>
   <ul>
   <li><a href="#">Smelly</a></li>
   <li><a href="#">Extra smelly</a></li>
   </ul>
</li>
</ul>
</div>
Other Max Design articles and presentations
Associated with webstandardsgroup.org