Tutorial 3 - Nested lists

Step 1 - Make a nested list

Start with a basic unordered list. The list items are all active (wrapped in <a href="#"> </a>) which is essential for this list to work. Some CSS rules are written exclusively for the "a" element. For this example a "#" is used as a dummy link. Keep in mind that a nested list should go between the <li> and </li> tags to be valid HTML.

Go to Step 2 →

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