Tutorial 3 - Nested lists

Step 12 - Change nested list background color

Within the rule set "#navcontainer li li a" the background color is changed to distinguish it from the main list items.

Go to Step 13 →

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 12px 3px 8px;
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