Start by heading over to the Saint Louis Zoo site at http://www.stlzoo.org. Notice the first tier navigation - the one that starts with Home, Your Visit, Animals - and the second tier navigation, which appears as a dropdown menu when you mouseover any of the first tier navigation. You could easily turn this navigation into a list, like this:

• Home
  • Mission
  • History
  • Organization
• Your Visit
  • Things To See and Do
  • Hours, Prices, & Directions
  • Daily Schedules
• Animals
  • About the Animals
  • Care & Management
  • Science & Research

Part 1: From Vertical to Horizontal

Take a look at the readings we did last week about using lists for navigation. One of the main things we covered was how to turn a vertical list into horizontal navigation. In fact, you'll remember that Listamatic, at http://css.maxdesign.com.au/listamatic/index.htm, had many such examples.

Pick one of the horizontal examples, from Listamatic or any of the other readings we did last week, and turn the first tier of the Zoo's list above into a horizontal menu.

If you're feeling ambitious, try a couple of the examples.

Part 2: Pretty Tabs

Now take a look at the two pieces by Douglas Bowman that we read: Sliding Doors of CSS and Sliding Doors of CSS, Part II. In those articles, he presents a clever and innovative method for turning simple lists into cool-looking curved tabs. Try out his technique with the first tier of the Zoo's list.

If you're feeling ambitious, and someone in your group knows how, create your own tab graphics; otherwise, use the ones that Bowman provides in his first article.

Part 3: Drop-down Menus

This is the hardest part of all, and it may not even work. You're now going to use both the first and second tiers of the Zoo's list.

Take a look at the pieces we read today about creating drop-down menus using CSS and a smidgen of JavaScript. Turn the Zoo's list into an attractive and functional menuing system, with a tabbed first tier and dropdown menus revealing the second tier.