Tutorial 3 - Nested lists

Step 13 - Adding padding-left to nested items

One way to help show that the nested list items are inside the main sections is to indent them. This can be done by changing the padding from "3px 12px 3px 8px" to "3px 3px 3px 17px". This is shorthand for "top: 3px", "right: 3px", "bottom: 3px" and "left: 17px" - the units start at the top and go clockwise.

For this model to work, you must keep the padding used on the nested lists to the same total as the main list items. The main list items use "right: 12px", "left: 8px;", so the nested list padding for left and right must add up to 20px.

Go to Step 14 →

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;
}

#navcontainer li li a
{
display: block;
color: #FFF;
background-color: #69C;
width: 9em;
padding: 3px 3px 3px 17px;
text-decoration: none;
border-bottom: 1px solid #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